codeeditor-kit

Used for quickly launching popular code editors:

• StackBlitz
• CodeSandbox
• JSFiddle
• CodePen

Install

npm i codeeditor-kit

Usage

import { Codeeditor } from 'codeeditor-kit'

const codeeditor = new Codeeditor({
  globals: {
    package: {
      dependencies: {
        // your dependencies
      },
      devDependencies: {
        // your devDependencies
      },
    },
    files: {
      // your files
    }
  },
  resolve(params) {
    return {
      package: {
        scripts: {
          start: `node -e "console.log(\'${params.message}\')"`,
        },
      },
      // any other options
    }
  }
})

codeeditor.open('stackblitz', { message: 'Hello, Stack' })
// or
codeeditor.open('codesandbox', { message: 'Hello, CodeSandbox' })

HTML

If you use JSFiddle and CodePen, You can use the html, css, and js properties to specify the content of each file.

const codeeditor = new Codeeditor({
  globals: {
    externals: {
      js: [/* your external js url */],
      css: [/* your external css url */],
    }
  },
  resolve(params) {
    return {
      html: `<span>${params.message}</span>`,
      css: `span { color: red; }`,
      js: ``,
    }
  }
})

codeeditor.open('jsfiddle', { message: 'Hello, JSFiddle' })

License

MIT License © Hairyf