Code Immediate

This is an online code editing and preview tool, similar to CodePen.

Features

[o] Built-in many frontend templates
[o] Support multiple preprocessing languages
[o] Support Vue 3 SFC
[o] Vue 3 SFC script language is support js and ts
[o] Vue 3 SFC template language is support html, haml, markdown and pug
[o] Vue 3 SFC style language is support css, less, scss, sass, stylus and postcss
[o] Support for save code
[o] Built-in support for using ES module syntax on browsers using jsdelivr, esbuild and importmap
[o] Support code formatting
[o] Support setting CDNjs for use
[o] Support github third-party login
[o] Support export zip
[o] Support embedded mode for easy use in documentation sites, making documentation examples easier
[o] Support sharing code URL to others to view
[o] Support console results to facilitate coding

Development

To get started with development, clone this repository and install dependencies using pnpm:

git clone https://github.com/tzuyi0817/code-immediate.git
cd code-immediate
pnpm install

Then, you can use the following commands:

• pnpm dev: Run in development mode
• pnpm build: Build for production
• pnpm preview: Run a local server to preview the production build

Built-in frontend framework

• React
• Vue
• Vue3 SFC
• Angular
• SolidJs
• RxJS

Support ES module syntax

Currently, ESM can be used in JavaScript, TypeScript, CoffeeScript, etc. By default, if you directly import a module like this:

import moment from 'moment';

It will be converted into a script tag and placed in the html head:

<script src="https://esbuild.vercel.app/moment@latest?format=iife"></script>

In the case of script type="module" (e.g., Vue3 SFC or SolidJs), it will be converted into:

import moment from 'https://cdn.jsdelivr.net/npm/moment/+esm';

Support Languages

Category	Language
HTML	Haml, Markdown, Pug
CSS	Less, SCSS, Sass, Stylus, PostCSS
JS	Babel, TypeScript, CoffeeScript, LiveScript

Technologies Used

• Frontend: vue3, typescript, tailwindcss, pinia and @tanstack/vue-query
• Environment construction: vite, eslint and prettier
• Code editor: monaco editor
• File load: loadjs
• ZIP Handling: jszip and file-saver
• Test: vitest, @testing-library and msw

License

This project is licensed under the MIT License.