layout

Layout v0.4.0

A page layout editor built with HTML, CSS & JavaScript. No dependencies, no build step. Design multi-page documents directly in the browser.

Features

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
L Line tool
Ctrl+Z Undo
Ctrl+Shift+Z Redo
Ctrl+D Duplicate
Ctrl+A Select all
Ctrl+F Find & Replace
Ctrl+] Bring forward
Ctrl+[ Send backward
Ctrl+Shift+] Bring to front
Ctrl+Shift+[ Send to back
Delete Delete selected
Esc Deselect

Technical Details

Version History

0.4.0current
  • Right-button (and middle-button) drag to pan the canvas — the same gesture as the Diagram tool, with the native text context menu preserved on text boxes
  • Horizontal-only alignment snap — a single toolbar button cycles Center → Left → Right, moving elements sideways without touching their vertical position
  • Snapping reworked — removed momentary snapping; Shift now locks the move axis, locks the resize ratio, and snaps line drawing and line-endpoint dragging to 15° increments (taking precedence over grid snap)
  • Text-box resize handles are no longer clipped by a box's overflow — clipping moved to an inner .el-clip layer, so all eight handles stay reachable outside the box while visible/scroll text keeps its exact padding-box behaviour
  • Larger resize hit targets — a 22×22 px grab area around every corner/edge handle while the visible handle stays compact
  • Single Export toolbar button with a PDF / PNG / JPG / HTML menu, using the Diagram tool's icon and toolbar position
  • PDF export downloads a real multi-page .pdf via html2canvas + jsPDF — no print dialog; PNG/JPG export renders at the project DPI
  • PDF/PNG/JPG export reuses the on-screen element renderer for pixel-for-pixel fidelity; the HTML export stays self-contained with no external font requests
  • Unique z-height per element — no two elements on a page share a z-order rank; the stack is re-densified on every structural change
  • Layer reordering — drag rows in the Layers panel, use Bring Forward / Send Backward / Bring to Front / Send to Back (toolbar or Ctrl+] / Ctrl+[), or type a rank in the Layers panel or the Properties Z field
  • Element naming — a Name field in the Properties panel plus double-click-to-rename in the Layers panel, reflected in the layer list
  • Selected elements stay fully grabbable — resize handles now render in a top overlay (independent of element z-height) and the active selection wins hit-testing, so a selected element's handles and body can always be clicked even when another element sits on top of it
  • Page thumbnails are now honest miniatures of the page — the sidebar renders a real, scaled copy of the canvas instead of a separate hand-drawn approximation
  • Thumbnails reuse the exact same element renderer as the canvas and export (domEl()), so rich text, images, corner radii, strokes, rotation, opacity and the page background all match what you see on the canvas
  • Each thumbnail is CSS-scaled to the sidebar width, uses the page's true aspect ratio (no more letterboxing of A4 or landscape pages), and re-fits when the window resizes or the pages panel collapses/expands
  • Removed the old standalone canvas painter, which drifted from the real render (circles drawn as squares, gray image placeholders, single-line truncated text)
0.3.0previous
  • Inline canvas text editing — double-click any text element to edit it in place, pixel-perfect WYSIWYG
  • Floating inline formatting toolbar — bold, italic, underline, strikethrough, super/subscript, alignment, lists, font family, size, weight and colour
  • Text/chrome separation — typography lives on an inner .el-content layer, so editing never disturbs box layout, resize handles or styling
  • Robust selection handling — formatting applies to partial or full selections and survives focus changes from toolbar controls
  • Auto-resize while typing — boxes grow/shrink to fit edited content
  • Fixed inline formatting lost on blur, reversed arrow-key caret movement, and toolbar dropdowns closing the moment they open
  • Fixed advanced inline font controls (family, size, weight, colour) doing nothing for real users; the controls now reflect the selected text's actual style
  • Canvas pan clamping — pan cannot push the canvas outside the viewport (mirrors diagram project)
  • Two-pass clamp on Ctrl/Cmd+wheel zoom — zoom anchor preserved, clamped before and after
  • Pinch-to-zoom clamp and rect fix — pinch anchor now uses correct viewport rect (canvas-scroll, not canvas-container)
  • Window resize handling — re-clamps pan when sidebar collapses/expands or window resizes
  • Arrow-key element bumping — arrow keys nudge selected elements 1px (10px with Shift), single undo per gesture
  • Clamp on all load/import/reset paths — new project, import, reset-view, and localStorage restore
  • Clamp on zoom buttons — zoom-in/out buttons trigger re-clamp after zoom change
  • Clamp on sidebar collapse and resize — panel collapse/expand re-clamps to new viewport width
  • Project & page properties — page size presets (Letter / A4 / custom), orientation, margins, columns, gutter, bleed and slug
  • Document panel now hosts all project-wide settings and appears when nothing is selected
  • Six measurement units (px, in, cm, mm, pt, pc) on every dimension field — geometry stays pixel-accurate underneath, units are display-only
  • Page DPI setting for raster export and image-resolution warnings (never affects layout)
  • Non-printing guides — shaded margin bands with a dashed margin frame, plus column, bleed and slug guides
  • Unit-aware rulers and a configurable grid with an optional baseline overlay
  • Snapping to guides and grid, with a toolbar master switch (or press S) and hold-Shift momentary snapping
  • Grid spacing re-expressed as clean values when the document unit changes
  • Alignment panel — a 3×3 grid to align elements to the page, the margins, or the selection's bounding box
  • Images insert at their natural aspect ratio and can be locked to it, with a "Reset to original ratio" button
  • Physical page size, background colour and optional bleed with crop marks in PDF/print export
  • Raster PNG/JPEG export at the project DPI, with an image-resolution (PPI) warning
  • PDF/print output is now pixel-for-pixel identical to the canvas — export reuses the same element renderer, fixing text that wrapped differently on screen vs. PDF
  • Self-contained HTML/PDF export — no external font requests (removed the Google Fonts link)
  • Fixed stroked text frames losing their border and paragraph spacing being dropped in export
  • Toolbar scrolls horizontally instead of overflowing on narrow windows
0.2.0previous
  • Rich text editor with inline formatting (bold, italic, underline, strikethrough, superscript, subscript)
  • Text box style controls — fill, stroke, opacity, radius, rotation (standalone Box panel)
  • Collapsible properties panel sections (Position, Text, Box, Document, Image)
  • New / Save / Import project buttons in toolbar (.json files)
  • Vertical alignment, overflow mode, columns, drop caps, and hyphenation for text
  • Find & Replace with prev/next/replace/all (Ctrl+F)
  • Special character picker
  • Per-page dimensions with Letter / A4 presets
  • PDF export via browser print
  • Google Fonts embedding in HTML export
  • Zoom/pan with pinch-to-zoom and two-finger trackpad panning
  • Grid overlay with toggle and rulers
  • Resizable sidebar with collapse toggle
  • Fixed inline formatting persistence — selection survives toolbar interactions
  • Fixed Delete/Backspace and Ctrl+A in contentEditable fields
0.1.0initial
  • 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)