Sanctum Mock / Design collaboration

Sanctum Mock

Create interface mockups, preview ideas and collect feedback before implementation.

Discuss your use case Explore capabilities ↓

Available as a managed deployment

Explore before you build

Compose
Preview
Annotate

Concept illustration. Not a live application or screenshot.

Rich text/code/JSON/JSX sandbox editors
HTML + CSS preview with live rendering
Image mockup upload with annotation

How it fits your work

From first idea to shared prototype.

Concept illustration · Build and preview

Build and preview

Explore an interface with code and a preview side by side.

Code and preview together
Start from reusable templates

Technical details

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

Concept illustration · Make feedback specific

Make feedback specific

Show exactly where a design needs attention, with feedback attached to the work.

Pin comments to a design
Keep feedback in context

Technical details

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

Concept illustration · Bring mockups into a page

Bring mockups into a page

Place a mockup within another page using an embeddable component.

Embeddable web component
Layout-aware presentation

Technical details

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

Concept illustration · Share work for review

Share work for review

Give stakeholders a way to inspect a mockup and discuss the next iteration.

Share a review link
Export a self-contained mockup

Technical details

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

Start with a real use case

What should Sanctum Mock make easier?

Tell us about the work, the people involved and the result you need. We’ll agree the capabilities and implementation scope together.

Discuss your use case ↗

Already have access? Sign in to Sanctum Mock ↗