XCON/SKETCH
The format LLMs generate best. Compact Markdown authoring syntax for examples and AI-generated drafts.
Viewer-only UI documents
XCON Viewer
XCON lets you generate, embed, and share UI interfaces as structured documents. No scripts. No execution. Safe by design.
account.xcon.sketchrendered preview
Account
SKETCH
JSON
compat
Profile
Structured UI document
Viewer boundary
Scripts are blocked by design. Share UI from anyone - open it anywhere, safely.
Live SKETCH demo
Load XCON/SKETCH. See it render.
The demo types a curated XCONBNB mobile screen in SKETCH. Each completed block is parsed and rendered immediately, so the interface builds up on the right as the source appears on the left.
example.xcon.sketch
typing...
Write SKETCH. Ship JSON.
Use SKETCH for Markdown and AI-generated drafts. Use JSON as the canonical structure for APIs, schemas, and tooling. XML and TAGLESS stay available for compatibility and round-trip checks.
XCON/JSON
Canonical structure for APIs, schema validation, and interchange.
Compatibility Formats
XML and TAGLESS are documented for conversion, tooling, and transport compatibility, but they are not the recommended starting point.
Public Entry Points
The initial site is intentionally complete at the navigation and discovery layer, while each section can keep growing independently. Start with the spec, explore examples, or drop XCON into your LLM prompt today.
Docs
Guides, package references, and integration notes.
Spec
Object Model plus SKETCH, JSON, XML, and TAGLESS syntax rules.
Examples
Generated examples in all public syntax forms.
API
Core, viewer, CLI, framework wrappers, and plugins.
Security
Viewer-only boundary and blocked runtime features.
LLM Index
Machine-readable guidance for assistants and search systems.
Companion Tools
XCON Viewer stays focused on safe UI documents. Chain and Workflow are sibling projects for expression evaluation and action-flow design.
XCON Chain
Public read-only expression playground for data lookup, formatting, sugar syntax, linting, and trace output.
XCON Workflow
Sketch, inspect, validate, and preview portable workflow/action documents as diagrams and dry-run plans.
Template Studio
Production-ready SKETCH + SUGAR studio for data-bound Markdown UI documents.
Meta Lab
Experiment with path metadata that drives fixture binding, workflow generation, and SKETCH dashboards.
Workflow Diagram Editor
Author workflow diagrams and inspect the generated SKETCH + workflow source for executable flow documents.
SKETCH Workflow Monitor
Run a live queue and scheduler simulation against a SKETCH monitoring dashboard.
XCON Family Binding
See fixture, chain, workflow, and SKETCH work together while workflow replay updates only the data fixture.
Binding Lab
Paste Markdown/SKETCH, JSON fixture, and workflow source, then render and run them together.
Demo
See how XCON Viewer can present AI-generated UI documents, Markdown + SKETCH answers, and viral artifact-style experiences.
XCON Viewer Viral Demo
A focused full-screen product demo without the site header, built to show XCON Viewer as an AI-native UI document renderer.
ChatGPT-style XCON Demo
A ChatGPT-style conversation where Markdown + XCON/SKETCH answers render polished inline artifacts.
Claude-style SKETCH Demo
A Claude-style split interface that streams Raw SKETCH while the live visual document renders beside it.
ChatGPT Simulation
Watch a Markdown answer stream an XCON fence into a live artifact preview.
Rendered Chat Simulation
Watch Markdown + SKETCH stream as raw source while the chat renders the answer inline.
HTML/CSS Simulation
Watch a Markdown answer stream HTML and CSS into a sandboxed artifact preview.
Install
Use the viewer in HTML, JavaScript, Markdown, Vite, React, Vue, or CI workflows.
npm install @xcon-viewer/core @xcon-viewer/viewer
npm install @xcon-viewer/react @xcon-viewer/vue
npm install @xcon-viewer/markdown-it @xcon-viewer/remark @xcon-viewer/vite-plugin