Code-Run: A Lightning-Fast Browser Editor for Vue, ESM, and Instant Previews

code-run is a browser-based playground designed to eliminate bloat. You write code, you see the result—it’s that simple. Despite its minimal interface, it handles significant complexity behind the scenes, including preprocessing, flexible layout switching, and serverless support for Vue single-file components.

Core Features

• Flexible Languages and Layouts: Toggle between HTML, JavaScript, TypeScript, CoffeeScript, Vue 2, or Vue 3. Arrange your workspace however you prefer using grid, row, or column views.
• Custom Asset Injection: Drop in external CSS and JavaScript files to test new fonts, debug library conflicts, or modify page behavior on the fly.
• Ready-to-use Templates: Skip the boilerplate. Built-in templates help you get past the blank-screen phase in seconds.
• One-Click Zip Export: Package your entire project into a zip file for local storage or easy sharing.
• Automatic Formatting: Use a quick shortcut to clean up your code, ensuring consistent readability instantly.
• Reliable Integrated Console: The built-in console provides accurate logs, removing the guesswork when debugging undefined values.
• Native Vue SFC Support: Run Vue 2.x and 3.x Single-File Components natively. Keep your styles, templates, and scripts in one place where they belong.
• VSCode Themes: Port your favorite editor themes directly. Dozens are built-in, and a dedicated converter script is included for custom VSCode themes.
• GitHub Gist Integration: Save snippets directly to your Gists via the API, eliminating the need for manual copy-pasting.
• URL-Persistent State: Share your work without a Gist. The editor encodes your changes directly into the URL, so anyone with the link sees exactly what you see.
• Code Screenshots: Generate polished images of your code snippets—similar to Carbon—perfect for documentation or social media.
• Browser-Based ES Modules: Leveraging import maps and unpkg, you can write import { thing } from 'pkg' and it will resolve. If unpkg fails to find the right version, you can define the import map manually.
• Embeddable Mode: Drop the editor into blog posts or documentation. It runs smoothly in an embedded state without interfering with the parent page.

Local Build and Setup

To get started locally, clone the repository and install dependencies:

1. git clone https://github.com/wanglin2/code-run.git
2. cd code-run
3. npm i
4. npm run serve

Configuration

• Changing the Base Path: The default path is /code-run/. To change it:
  • Update publicPath in vue.config.js.
  • Update the base field in src/config/index.js.
• Routing Mode: Hash mode is enabled by default. To use history mode, change routerMode in src/config/index.js. Note: If using history mode with nested paths, you may need to adjust the script asset links in /public/index.html.
• Production Build: Run npm run build after modifying any configurations.

ESM Implementation

code-run supports ES Modules (ESM) across JavaScript, TypeScript, CoffeeScript, and Vue. By default, a statement like import moment from 'moment' is transformed into import moment from 'https://unpkg.com/moment?module'.

However, some packages (like Vue) require specific builds. Because the default unpkg redirect often points to a bundler version rather than a browser-ready ESM build, you can use the editor's import map feature to point to the exact URL required.

Maintenance Scripts

• npm run buildConsole: Compiles /public/console/index.js into an ES5 file (compile.js) for the preview iframe. This file should not be edited manually.
• npm run buildMonacoWorker: Repackages Monaco Editor web workers. Run this after updating the Monaco version.
• npm run convertTheme: Converts raw VSCode theme files into the format required by Monaco.
• npm run createThemeList: Scans the theme directory and automatically regenerates the configuration index.
• npm run buildVueSFCCompiler: Bundles the @vue/compiler-sfc used for Vue 3 support.