A zero-dependency, vanilla JavaScript toolkit for building visual web editors and image editors. Drop it into any project with a single script tag.
A full-featured Bootstrap visual editor with drag-and-drop blocks, live preview, responsive device switching, and a complete programmatic API.
Pre-built Bootstrap 5 component blocks. Drag navbars, heroes, cards, forms, footers and more directly into your page.
Switch seamlessly between the visual canvas and a syntax-highlighted code editor for HTML, CSS and JavaScript.
Instantly preview your designs on desktop, tablet and mobile viewports with a single click.
Save as a full HTML page or JSON. Export locally or POST to your API endpoint with built-in callbacks.
Bind the editor output to any HTML form with a single method call. Perfect for CMS and admin panel integration.
Built-in dark and light themes. Full internationalization support with English and Spanish out of the box.
A complete image editor with a real layer system, blend modes, drawing tools, text layers, layer groups, filters and export. All in a single vanilla JS file.
Full layer management with opacity, blend modes, visibility, reorder via drag-and-drop, groups with folders, and right-click context menu.
Rectangular, elliptical, polygon, freehand and magic wand selections with marching ants animation. Copy, cut, paste selections as new layers.
Re-editable text layers with 80+ Google Fonts loaded via CDN. Weight, style, spacing, line height, decoration and alignment controls.
Photoshop-style blending options: drop shadow, inner shadow, outer glow, stroke and color overlay with live preview.
Pencil, eraser, shapes, arrows, gradients, flood fill, eyedropper and move tool. Color palette with hex input and web color swatches.
Import images as new layers via button or drag & drop. Export to PNG, JPEG or WebP with quality slider and file size estimation.
Real-time brightness, contrast, saturation, blur, grayscale, sepia and hue filters. Crop, resize, rotate and flip.
8 resize handles with proportional scaling (Shift). Zoom in/out, fit to screen, pan tool, and scrollbars for large canvases.
Full undo/redo history. Keyboard shortcuts for all tools, copy/paste, zoom, select all, deselect and invert selection.
No npm, no webpack, no build step. Include two script files and initialize with a single line. Works with any framework or plain HTML.
file:// protocolconst editor = ShouEditor.init('#editor', { theme: 'dark', width: '100%', height: '100vh', saveTarget: 'remote', saveEndpoint: 'https://api.example.com/save', onSaveSuccess: (res) => console.log('Saved!', res) }); // Get the generated code const { html, css, js } = editor.getCode();
No sign-up required. No dependencies to install. Just download and go.