Changelog

What's new and what's next for Scamp.

v0.2.2 — Upcoming

Planned for the next release. Visibility and opacity controls, typography tokens, HTML tag support, a save-status indicator, the canvas-size rework, and mobile/tablet breakpoints.

Visibility and opacity controls to-do

  • New Visibility section in the WYSIWYG properties panel for every element
  • Opacity — number input (0–100) and range slider, synced — maps to the CSS opacity property
  • Visibility — segmented control with Visible (default), Hidden (visibility: hidden), and None (display: none)
  • Elements with display: none stay visible on the canvas with a faded checkerboard overlay so you can still select them
  • Flex layout toggle auto-disables with a tooltip when an element is set to display: none
  • Round-trips through the parser and shows up in the raw CSS editor like any other property
  • Default values (opacity: 1) omitted from output to keep CSS clean

Typography tokens in theme.css to-do

  • New Typography section in the theme panel alongside Colors
  • Font sizes, font families, and line heights stored as CSS custom properties in theme.css
  • Token type inferred from the value — rem/px/em = size, quoted string = font family, unitless number = line height
  • Token picker next to font-size, line-height, and font-family inputs in the WYSIWYG panel
  • Autocomplete for typography tokens in the raw CSS editor
  • theme.css watched by chokidar — new tokens appear in the picker immediately
  • Add, rename, and delete typography tokens with the same flow as color tokens

Save status indicator to-do

  • Persistent indicator in the toolbar with four states: ✓ Saved, ↑ Saving…, ● Unsaved, ⚠ Save failed
  • Only shows Saved when canvas state, the file write IPC, and chokidar confirmation all agree
  • Save failed state shows a retry button and persists until the next successful write
  • Failed writes also logged to the terminal panel when it is open

HTML element types to-do

  • Change any rectangle or text element's HTML tag from a new Element section at the top of the properties panel
  • Rectangle variants: section, article, aside, main, header, footer, nav, figure, form, fieldset, ul, ol, li, details, summary, dialog, button, a
  • Text variants: h1–h6, span, label, blockquote, pre, code, strong, em, small, time, figcaption, legend, li
  • Media variants: video, iframe, and svg alongside existing img
  • New input element type with its own toolbar button (F): input, textarea, select
  • Tag-specific attribute fields appear inline — href/target for a, type for button, for for label, rows/placeholder for textarea, etc.
  • Class name prefixes stay as rect_, text_, and img_ — only the tag changes
  • Unknown attributes round-trip through the parser untouched

Canvas size rework to-do

  • Root element defaults to width: 100%; height: auto — no more hardcoded pixel dimensions bleeding into exported CSS
  • Canvas viewport size (the white rectangle your design sits inside) is separate from root element CSS and saved in project metadata
  • Canvas height grows with its content, the way a real browser page does
  • Width presets in the toolbar: Mobile 390, Tablet 768, Desktop 1440, Wide 1920, or a custom value
  • Overflow hidden toggle clips content that extends past the viewport width
  • One-time migration notice on first open for existing projects

Mobile and tablet breakpoint toggles to-do

  • Toolbar viewport toggle: Desktop, Tablet, Mobile
  • Switching breakpoints resizes the canvas and scopes every edit to that breakpoint's @media (max-width: …) block
  • WYSIWYG panel shows the current value for the active breakpoint, with a small indicator when a property overrides the desktop base
  • Default breakpoints 1440 / 768 / 390, configurable per-project
  • @media blocks appended at the bottom of each CSS module, grouped by breakpoint
  • Parser reads and writes media query blocks; custom breakpoints preserved verbatim
  • Depends on the canvas size rework shipping first

v0.2.1

Copy and paste elements shipped

  • Cmd+C to copy a selected element and all its children
  • Cmd+V to paste as a sibling of the current selection, or onto the page root
  • Pasted elements get new IDs — deep copy, not a reference
  • Cmd+D to duplicate in place
  • CSS for new classes written to the module file on paste

Images shipped

  • As an img element: click the image button in the toolbar (I) or drag an image file onto the canvas to place an <img> element
  • As a background: select a rectangle and click "Set background image" in the background section of the properties panel to set background-image
  • Background controls expand on image set: background-size, background-position (9-point grid), background-repeat
  • All image files copied into an assets/ folder in the project directory
  • assets/ documented in agent.md

Add new page and duplicate page shipped

  • Add page: click "+ Add Page" in the sidebar, name it inline, get a blank .tsx and .module.css created immediately
  • Duplicate page: right-click a page → Duplicate, new name defaults to [name]-copy, editable inline
  • Both flows use the same inline naming input component
  • Name validation: lowercase, alphanumeric and hyphens only, unique within the project

Nudge with arrow keys shipped

  • Canvas: arrow keys move a selected element 1px; Shift + arrow moves 10px
  • Properties panel: up/down arrow in any number field increments/decrements by 1; Shift + up/down by 10
  • Canvas nudge triggers the normal debounced file write
  • Panel nudge commits on blur or Enter — not on every keydown
  • Values clamp at 0 for properties where negative is not meaningful

v0.2.0

WYSIWYG properties panel shipped

  • Full visual properties panel alongside the raw CSS editor — users can switch between the two at any time using the CSS / Visual toggle at the top of the panel
  • Changes in either panel stay in sync — edits in the visual panel update the CSS editor and vice versa

Remove layout section from text elements shipped

  • The flex/layout section is hidden in the properties panel when a text element is selected
  • Padding controls remain visible for text elements

Shorthand box property inputs shipped

  • Padding, margin, border, and border-radius inputs accept CSS shorthand format
  • Accepted formats: x, x x, x x x x — spaces or commas both work
  • Parsed values shown as a resolved preview on blur
  • Invalid input reverts to the previous value without crashing

Undo / redo shipped

  • Cmd+Z / Ctrl+Z to undo
  • Cmd+Shift+Z / Ctrl+Shift+Z to redo
  • History covers canvas changes and properties panel edits
  • 50 step limit
  • External file edits clear the undo history for that page
  • Implemented via zundo Zustand middleware

Project color swatches shipped

  • Color picker swatches default to a built-in neutral palette
  • Once the project has any colors in its CSS files, swatches switch to colors used in the project
  • Colors extracted from CSS modules at load time and on every file change
  • Swatches ordered by frequency of use, duplicates removed

Project themes and CSS variable tokens shipped

  • Each project gets a theme.css file with CSS custom properties
  • Token picker in the WYSIWYG panel lets users insert var(--token-name) as a value
  • Token swatches show the resolved color, not just the variable name
  • CodeMirror CSS editor shows token autocomplete suggestions
  • Theme panel for adding, renaming, and deleting tokens
  • theme.css watched by chokidar — changes hot-reload into the token picker
  • Deleting a token that is in use shows a warning

Element naming and layers panel shipped

  • Elements can be renamed — name becomes the CSS class prefix (e.g. "Hero Card" → hero-card_a1b2)
  • Unnamed elements default to rect_ or text_
  • Layers panel in the left sidebar shows the full element tree for the active page, indented to reflect nesting
  • Click a layer to select the element on the canvas
  • Selected element highlighted in the layers list
  • Renaming writes both the .tsx and .module.css atomically via a dedicated element:rename IPC channel — never one without the other

v0.1.0 — Initial Release (POC)

The first working version of Scamp. A proof of concept covering the full end-to-end loop: draw visually, get real code, edit with an agent, canvas reloads automatically.

Project management

  • Create a new project by choosing any folder on your machine
  • Open an existing project folder
  • Recent projects list on the start screen (last 5 projects)
  • Missing project folders shown as greyed out with a "Folder not found" label
  • Auto-generated agent.md on project creation with code conventions for coding agents

Pages

  • Default home page created with every new project
  • Pages listed in the left sidebar
  • Switch between pages by clicking in the sidebar

Canvas

  • DOM-based canvas viewport (1440×900, scales to fit the window)
  • Rectangle tool — click and drag to draw a rectangle (R)
  • Select tool — click to select, drag to move, handles to resize (S)
  • Text tool — click to place a text element, double-click to edit (T)
  • Nested rectangles — draw inside any selected rectangle
  • Selected element shown with a blue outline and 8 resize handles
  • Checkerboard background outside the viewport frame

Properties panel — raw CSS editor

  • CodeMirror editor loads the selected element's CSS class body on selection
  • Edit any CSS property in any format — shorthand, longhand, anything valid
  • Commit on blur or Cmd+S — triggers a targeted class patch and file write
  • Unknown properties preserved in output and shown with a ⚠ warning label
  • Placeholder shown when no element is selected

Code output

  • Every canvas change auto-saves to a .tsx and .module.css file
  • Atomic file writes (write to .tmp, then rename) to prevent partial reads
  • data-scamp-id attribute on every element as a stable identity anchor
  • Class names follow the [type]_[4-char-id] pattern (e.g. rect_a1b2, text_c3d4)
  • Only non-default properties emitted — output stays clean and readable
  • Read-only code panel at the bottom shows live TSX and CSS with syntax highlighting

Bidirectional sync

  • chokidar watches project files for external changes
  • External edits (agent, editor, terminal) parsed and reflected on the canvas automatically
  • parseCode() diffs against current state before updating — no unnecessary re-renders
  • Unknown CSS properties round-trip through the file untouched

Built-in terminal

  • Full terminal panel (`Ctrl+``) powered by node-pty and xterm.js
  • Opens in the project folder automatically
  • Up to 3 terminal tabs per session