Codi.link

Your HTML, CSS and JavaScript Playground Editor

Table of Contents

1. About The Project
   • Features
   • Keyboard Shortcuts
2. Getting Started
   • Prerequisites
   • Development
   • Desktop App
   • Built With
3. License
4. Contact

About The Project

codi.link is a live playground for HTML, CSS and JavaScript. Edit your code and see the result instantly, then share it with a URL or export it as a ZIP.

Try a demo

Features

• Live preview — HTML, CSS and JS update in an isolated iframe as you type. CSS applies without a full reload.
• Monaco editor — the same engine as VS Code, with Emmet, HTML tag autocomplete, command palette, ligatures (Cascadia Code PL) and configurable font, tabs, word wrap, minimap and cursor.
• Layouts — six resizable layouts (default, layout-2, vertical, horizontal, bottom, tabs). Mobile always uses tabs.
• Console — captures console output from the preview, with a badge count and jump-to-line.
• History — save, rename and reopen previous sandboxes from local storage.
• Demos — built-in examples (counter, clock, todo, CSS orbs, theme toggle, typewriter).
• npm packages — search packages and inject a Skypack import into the JavaScript editor.
• Share & export — the URL stays in sync with your code; copy the link, open the preview in a new tab, or download a ZIP (separate files or a single HTML file).
• Drag and drop — drop .html, .css or .js files onto the editor.
• Settings — themes (Dark, Light, High Contrast, One Dark Pro, Dracula, Mosqueta Dark), UI language (English, Spanish, Portuguese), autosave, URL sync, max JS execution time and more.
• Desktop app — optional Tauri wrapper for a native window.

Keyboard Shortcuts

Shortcut	Action
Ctrl/Cmd + S	Download the current sandbox as a ZIP
Ctrl/Cmd + P	Open the editor command palette
Ctrl/Cmd + ,	Toggle settings
Ctrl/Cmd + Shift + C	Copy the shareable URL

Back to top 🔼

Getting Started

Prerequisites

This project uses Bun. Install it first if you do not have it.

Development

Install dependencies:

bun install

Start the dev server:

bun dev

Other scripts:

bun run build   # production build
bun run serve   # preview the production build
bun run lint    # ESLint

A git pre-commit hook runs ESLint on staged JavaScript files.

Desktop App

Requires Rust in addition to Bun.

bun run tauri dev     # native window against the Vite dev server
bun run tauri build   # package the desktop app

Built With

• JavaScript
• Monaco Editor
• Vite
• Zustand
• Split Grid
• Tauri
• ESLint
• PostCSS

Back to top 🔼

License

Distributed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 license. See LICENSE for more information.

Back to top 🔼

Contact 📭

Miguel Ángel Durán @midudev @midudev - hi@midu.dev

Back to top 🔼