Live, interactive code editor built with Ace Editor, Tailwind CSS, and Anime.js for smooth resizing animations.
- Three-Pane Editor: HTML, CSS, and JavaScript editors side-by-side
- Live Preview: Renders your code in an
<iframe>with sandboxed scripts - Resizable Panes: Drag handles to resize editor and preview areas
- Console Output: Toggleable JavaScript console captures
console.logand errors - Prettify Button: Format HTML, CSS, and JS with js-beautify
- Filename & Captain Name: Editable title and author saved to
localStorage - Keyboard & Mouse: Auto-run previews on blur/change events
- Edit Code: Type in the HTML, CSS, or JS pane.
- Auto-Update: Preview updates on blur (HTML/CSS) or change (JS) events.
- Show/Hide Console: Click the Console button to view logs/errors.
- Prettify: Click Prettify to format all panes.
- Resize: Drag the grey bars between panes to adjust layout.
- Rename: Click the pencil icon next to the title to edit project name.
MIT © DevwithAnTic