jsOM 🎨

jsOM - The Definitive Designer Platform, LLM Friendly

Draw UI visually → Export precise JSON specs → Any LLM generates production code. The bridge between human creativity and AI code generation.

⚖️ LICENSE CHANGE NOTICE

IMPORTANT: As of January 28, 2026, jsOM is licensed under a Source-Available License.

| Version | License | Status | |---------|---------|--------| | ≤ v1.4.0-beta (tag: v1.4.0-beta-MIT-LAST) | MIT | ⚠️ DEPRECATED - No updates, no support | | ≥ v1.5.0 | Source-Available | ✅ ACTIVE - All new features here |

⚠️ MIT Versions Are DEPRECATED

The MIT version (v1.4.0-beta and earlier) is officially deprecated:

❌ No security updates
❌ No bug fixes
❌ No new features
❌ No support
❌ Architecturally diverging (incompatible soon)

Using the MIT fork = Using abandonware.

📋 Read the Ethics Statement

127 people cloned jsOM under MIT.

If you're one of them: Read MIT-ETHICS.md

TL;DR: You have legal rights. But parasitizing a solo dev's work for commercial gain is morally bankrupt and the community will know.

For Users of Pre-v1.5.0 (MIT versions)

If you downloaded jsOM under MIT before Jan 28, 2026:

✅ Legitimate Use (learning, internal tools, contributions):

You're fine, keep learning!

⚠️ Commercial Use (competitor products, SaaS, rebrand):

Contact: alessioivoycazzaniga@gmail.com
Discuss collaboration, licensing, partnership
Undeclared commercial forks will be publicly tracked

❌ Parasitic Use (silent competitor, zero attribution):

See MIT-ETHICS.md
Your fork will be listed publicly
Community judgment is permanent

Note: v1.6.0+ will use AGPL-licensed dependencies, making MIT forks legally incompatible with new code.

Branches

| Branch | Status | Description | |--------|--------|-------------| | master | Main | Stable release, production-ready | | core | Dev | Development branch | | feature/* | Experimental | Feature development branches |

💖 Support This Project

If jsOM helps your workflow, consider supporting its development:

Sponsor Tiers

| Tier | Perks | |------|-------| | ☕ Supporter (€5/mo) | Name in README, Discord access | | 🚀 Builder (€10/mo) | Early access to features, priority support | | 💎 Patron (€25/mo) | 30min monthly consulting, feature requests |

🎯 What is this?

UI Canvas MCP is a visual design tool that:

Lets you draw UI visually - Like Figma/Keynote, with rectangles, text, buttons, etc.
AI understands your design - Multi-agent pipeline analyzes layout, style, hierarchy
Generates precise specs - Export universal format any LLM can understand
MCP integration - AI agents can read and manipulate your designs

The key insight: Your drawing is the source of truth. AI doesn't guess layouts - it uses YOUR precise design.

🆕 What's New (v1.4.0-beta - Jan 2026)

Fan Pivot - Gestural Fan Arrangement

Keychain Metaphor - Arrange elements like keys on a keychain, pinned at a pivot point
Click & Drag - Click to place pivot, drag to control spread and rotation
Progressive Rotation - Each element rotates more than the previous for natural fan effect
Physics Settling - Elements settle with inertia after gesture release
Polar Control - Angle controls rotation, distance controls spread
Access via 🌀 Fan icon in toolbar (requires 2+ selected elements)

PDD - Physics Driven Design (World Paradigm)

Enter the World - Instead of "simulate", you step into a physics environment
Spring Constraints - Connect elements with elastic springs (Soft, Medium, Stiff, Bouncy presets)
Real-time Physics - 60fps simulation via Konva direct manipulation
Tension Visualization - See constraint forces in real-time
Commit on Exit - Leave the world to commit final positions
Access via ⚛️ Atom icon in toolbar

Rotation Curve System (Beta)

Intelligent Rotation Distribution - Apply easing curves to control rotation across multiple elements
Preset Curves - Linear, Ease In/Out, Logarithmic, Exponential
Freehand Mode - Draw custom curves directly on canvas
Real-time Preview - See rotation changes as you draw
Keyboard Controls - Enter to confirm, ESC to cancel

TIP Lite Architecture

Layered Code Structure - archetipi (pure math) → molecole (domain rules) → organismi (orchestration)
World Paradigm - Enter/exit instead of start/stop for immersive interactions
Applied to Fan Pivot and PDD modules

What's New (v1.3.0 - Jan 2026)

UILayoutSpec v1.1 (LLM-Optimized Export)

Direct LLM Instructions - llmContext field with code generation guidance
Dual Type System - Both type (raw) and semanticType (inferred) for transparency
Token Optimization - Stripped default values based on fig2json research
Research-Backed - Based on Addy Osmani's LLM workflow best practices

Precise Mode & Snap Grid

Shift+Drag - DAW/synth-style fine movement (1/10 precision)
Alt+Drag - Temporary grid snapping (Apple Keynote-style)
Live Overlay - Coordinates display near cursor during precise mode

Typography Harmonization System

Font Database - 15+ fonts with classification metadata
Brand Archetypes - clean, classy, friendly, quirky, techie
Compatibility Scores - Algorithmic pairing analysis
Type Scales - Mobile, desktop, editorial presets

Test Suite & Code Quality

Vitest - 26 unit tests for canvasStore
DOMPurify - XSS prevention for user input
Quadtree - O(log n) marquee selection
Scoped Logging - Environment-aware debug utilities

📜 Previous Updates (v1.2.0)

Blender-Style Smooth Zoom

Exponential Scaling - Perceptually linear zoom using Math.pow(2, -deltaY * ZOOM_SENSITIVITY)
Trackpad Friendly - No more "shooting off" with two-finger zoom gestures
Consistent Feel - Same zoom behavior regardless of scroll speed
Wide Range - 0.1x to 10x zoom levels

TOON Export Format

40% Fewer Tokens - Optimized notation for LLM context windows
Tabular Format - Elements, events, voice notes in compact tables
Element Markers - Voice notes reference elements with @id syntax
Export Integration - Available alongside JSON, YAML, Markdown in Export Panel

Extended Device Support

24+ Device Presets - iPhone 16 Pro/Max, Pixel 9, Samsung S24, iPad Air, Galaxy Tab S9, MacBook Pro 14", iMac 24", and more
Device-Aware Blueprints - Automatically scale UI elements based on device type (mobile/tablet/desktop)
Modern Devices - Latest 2024-2025 device dimensions

Semantic Layers System

HTML Structure Organization - Organize elements into semantic sections (navigation, header, hero, footer, etc.)
Dual View Mode - Toggle between Classic (z-index) and Semantic (hierarchy) views
Quick Assign - One-click element assignment to sections
CSS Hints - Each section includes layout hints (flexbox, grid, positioning)

Multi-LLM Support

Gemini 2.0 Flash - Use Google's latest model for faster, smarter generation
Ollama Integration - Local models with qwen2.5:7b and minicpm-v
Provider Switching - Easily switch between cloud (Gemini) and local (Ollama)

Style Blueprints

9 Complete Design Systems - Bauhaus, Swiss, Glassmorphism, Brutalist, Material, Neomorphism, Retro80s, Japanese, Minimal
6 UI Component Blueprints - Hero, Navbar, Landing Page, Dashboard, Product Card, Profile
LLM-Optimized - Each blueprint includes compositional rules, color palettes, and element specs
Device-Aware Scaling - Blueprints adapt to mobile/tablet/desktop automatically
Semantic Integration - Blueprints map to semantic sections automatically

Multi-Agent AI Pipeline

LangGraph Integration - Stateful agent orchestration with conditional routing
Smart Mode - One-click AI generation with vision analysis
Knowledge Base - Design intelligence powered by SurrealDB
PHI Algorithms - Golden ratio layouts, spacing, and color harmony

Enhanced Canvas

Marquee Selection - Drag to select multiple elements
Voice Notes - Record and transcribe design notes (Whisper support)
Storyboard Recording - Track element movements for animations

🏗️ Architecture

┌─────────────────────────────────────────────────────────────────────┐
│                        UI Canvas MCP                                 │
├─────────────────────────────────────────────────────────────────────┤
│                                                                      │
│  ┌──────────────┐    ┌─────────────────────────────────────────┐   │
│  │   Canvas     │    │         Multi-Agent Pipeline            │   │
│  │   Editor     │    │  ┌─────────────────────────────────┐   │   │
│  │  (React +    │───▶

Jsom

Install / Use

README