Layout v0.1.0
A page layout editor built with HTML, CSS & JavaScript. No dependencies, no build step. Design multi-page documents directly in the browser.
Features
- Vector ShapesRectangle, circle, line tools with fill, stroke, opacity, and corner radius.
- Text EditingMulti-line text with font family, size, weight, alignment, and color.
- Image InsertUpload images with automatic sizing and aspect-ratio preservation.
- Multi-PageCreate, reorder, and delete pages with thumbnail navigation.
- LayersReorder elements with bring-forward/send-backward, toggle visibility.
- Undo/Redo50-step history with Ctrl+Z / Ctrl+Shift+Z.
- Auto-SaveWork is saved to localStorage automatically.
- ExportExport pages as standalone, self-contained HTML files.
Quick Start
Creating Elements
Select a tool from the toolbar (V for Select, T for Text, R for Rectangle, C for Circle, L for Line), then click or drag on the canvas to create elements.
Editing Elements
Click to select, drag to move. Drag the resize handles on corners and edges. Use the Properties panel to adjust position, size, fill, stroke, and text style.
Managing Pages
Use the Pages sidebar to add new pages, click thumbnails to switch, and hover thumbnails to reveal the delete button.
Tip: Use the Layers panel to reorder elements. Elements at the top of the list appear in front.
Keyboard Shortcuts
V Select tool
T Text tool
R Rectangle tool
C Circle tool
L Line tool
Ctrl+Z Undo
Ctrl+Shift+Z Redo
Ctrl+D Duplicate
Ctrl+A Select all
Delete Delete selected
Esc Deselect
Technical Details
- Framework: Vanilla JavaScript (ES5-compatible), no dependencies
- Rendering: DOM-based elements positioned on a canvas page
- State: Centralized state object per-page with undo/redo (50 steps)
- Persistence: localStorage auto-save on every change
- Theme: Free Open Tools ecosystem dark/light scheme with no-flash detection
- Canvas: 850 x 1100 px page (US Letter aspect ratio)
- Export: Standalone HTML with inline CSS (no external dependencies)
Version History
0.1.0current
- Initial public release
- Shape tools: rectangle, circle, line
- Multi-line text editing with font controls
- Image insertion with file upload
- Multi-page support with thumbnail navigation
- Layer panel with reorder and visibility toggles
- Properties panel for position, size, style
- 50-step undo/redo
- HTML export
- localStorage auto-save
- Free Open Tools ecosystem theme (light/dark)