Sanctum Mock
UI mockup and annotation tool. Create, share, and annotate interactive mockups with a rich code sandbox. Dual package: SPA + Web Component library.
Rich Code Sandbox
A browser-based code playground supporting HTML, CSS, JavaScript, JSON, and JSX — write, render, and iterate on UI components in real time with zero setup.
- Multi-tab editor with syntax highlighting for HTML, CSS, JavaScript, JSON, JSX, and Markdown
- Live preview pane that re-renders on every keystroke — no save or compile step required
- Integrated browser developer tools panel showing console logs, network requests, and element inspection
- Template library with pre-built UI patterns to accelerate mockup creation from scratch
Sovereignty Angle
Every sandbox session runs entirely in the browser and saves to your own instance — no code sent to a cloud IDE, no usage data mined, no dependency on a third-party snippet hosting service.
Image Annotation
Upload design mockups, screenshots, or wireframes and annotate them with pins, highlights, text, and drawing tools — perfect for design review and client feedback.
- Upload any image format (PNG, JPG, WebP, SVG) with drag-and-drop or clipboard paste
- Annotation toolset: pin markers, rectangle/circle highlights, freehand drawing, and rich text notes
- Layer-based annotation management with show/hide toggles and threaded comment replies per pin
- Side-by-side compare mode for versioned annotations across mockup iterations
Sovereignty Angle
Images and annotations are stored on your own infrastructure — no design data uploaded to a third-party review platform, no proprietary formats, no usage-limits per project.
Web Component Library
A dual-package system — SPA for authoring and a Web Component library for embedding finished mockups anywhere on the web with zero framework friction.
- React SPA for full mockup authoring: sandbox editor, annotation tools, and project management dashboard
- Lightweight <sanctum-mock> custom element for embedding published mockups into any HTML page
- Shadow DOM encapsulation ensures embedded mockups render consistently regardless of host page styles
- Responsive embed modes: fixed dimensions, full-viewport takeover, and adaptive container fill
Sovereignty Angle
Both the authoring SPA and the embeddable web component are self-hosted — no third-party JS embeds, no CDN dependency, no analytics beacon phoning home to an external service.
Export & Share
Share mockups instantly with unique URLs or export to production-ready formats — no account required for recipients, no friction for stakeholders.
- One-click share via unique, unguessable URLs with optional passphrase and expiry date protection
- Export to static HTML/CSS bundle for direct use in production websites or email templates
- PDF report generation combining mockup screenshots, annotations, and metadata in a branded document
- Embed code snippet generator for iframe or web component integration into third-party tooling like Notion or Confluence
Sovereignty Angle
Export files and shared URLs are served from your own infrastructure — no proprietary SaaS platform holding your mockups hostage, no graduated pricing based on number of shares.