API Documentation

wiremd provides a powerful programmatic API for parsing and rendering wireframes.

Quick Links

• Parser API - Parse markdown to AST
• Renderer APIs - Render to HTML, JSON, React, and Tailwind
• JSON Schema - JSON output schema and AST node structure.
• Type Definitions - Complete TypeScript type reference
• Plugin API - Create custom renderers
• Error Handling - Error handling guide
• Migration Guides - Version migration guides

Additional Resources

• 🚀 Framework Integrations - Next.js, React, Vite, and more
• 🔧 FAQ & Troubleshooting - Common issues and solutions

Installation

npm install wiremd

Quick Example

import { parse, renderToHTML, renderToJSON } from 'wiremd';

// Parse markdown to AST
const ast = parse(`
  ## Contact Form
  Name
  [_____________________________]
  [Submit]{.primary}
`);

// Render to HTML
const html = renderToHTML(ast, { style: 'sketch' });

// Render to JSON
const json = renderToJSON(ast, { pretty: true });

Core Functions

Parser Functions

• parse() - Parse markdown with wiremd syntax into an AST
• resolveIncludes() - Resolve ![[file.md]] include references before parsing
• validate() - Validate a wiremd AST for correctness

Renderer Functions

• renderToHTML() - Render AST to HTML with styles
• renderToJSON() - Export AST as JSON
• renderToReact() - Generate React/JSX components
• renderToTailwind() - Generate HTML with Tailwind classes
• render() - Universal renderer with format option

API Reference

Parser API

The parser converts markdown with wiremd syntax into an Abstract Syntax Tree (AST).

import { parse, validate } from 'wiremd';

// Parse markdown to AST
const ast = parse('## Heading\n[Button]');

// Validate the AST separately (ParseOptions fields are not yet implemented)
const errors = validate(ast);
if (errors.length > 0) {
  console.error('Validation errors:', errors);
}

Learn more about the Parser API →

Renderer APIs

wiremd provides multiple rendering targets:

import { renderToHTML, renderToReact, renderToTailwind } from 'wiremd';

// HTML with embedded styles
const html = renderToHTML(ast, { style: 'sketch' });

// React component
const component = renderToReact(ast, { typescript: true });

// Tailwind CSS
const tailwind = renderToTailwind(ast);

Learn more about Renderer APIs →

Type Definitions

wiremd is fully typed with TypeScript:

import type {
  DocumentNode,
  WiremdNode,
  ParseOptions,
  RenderOptions,
  ButtonNode,
  InputNode
} from 'wiremd';

Explore all type definitions →

Examples

Complete Rendering Pipeline

import { parse, validate, renderToHTML } from 'wiremd';
import { readFileSync, writeFileSync } from 'fs';

// Read input
const markdown = readFileSync('wireframe.md', 'utf-8');

// Parse
const ast = parse(markdown, { position: true });

// Validate
const errors = validate(ast);
if (errors.length > 0) {
  throw new Error(`Validation failed: ${errors.map(e => e.message).join(', ')}`);
}

// Render
const html = renderToHTML(ast, {
  style: 'clean',
  pretty: true
});

// Write output
writeFileSync('output.html', html);

Multiple Output Formats

import { parse, renderToHTML, renderToReact, renderToJSON } from 'wiremd';

const markdown = '## Login\n[Submit]{.primary}';
const ast = parse(markdown);

// Generate multiple formats
const html = renderToHTML(ast, { style: 'sketch' });
const react = renderToReact(ast, { typescript: true });
const json = renderToJSON(ast, { pretty: true });

// Save to different files
writeFileSync('output.html', html);
writeFileSync('Component.tsx', react);
writeFileSync('ast.json', json);

AST Manipulation

import { parse, renderToHTML } from 'wiremd';

const ast = parse('## Form\n[Button]');

// Modify the AST
ast.children.push({
  type: 'paragraph',
  content: 'Added programmatically',
  props: {}
});

// Traverse and modify
function addClassToButtons(node: WiremdNode) {
  if (node.type === 'button') {
    node.props.classes = [...(node.props.classes || []), 'custom-class'];
  }

  if ('children' in node && node.children) {
    node.children.forEach(addClassToButtons);
  }
}

ast.children.forEach(addClassToButtons);

const html = renderToHTML(ast);

Interactive Examples

Try wiremd online with our live demo site to see examples of:

• Different visual styles (sketch, clean, wireframe, material, brutal)
• Form components (buttons, inputs, selects, checkboxes)
• Layout components (grids, containers, navigation)
• Complex wireframes (dashboards, e-commerce, admin panels)

Advanced Topics

Custom Renderers

Create custom renderers for other frameworks:

import type { DocumentNode, WiremdNode } from 'wiremd';

function renderToVue(ast: DocumentNode): string {
  // Custom Vue renderer implementation
}

Learn how to create plugins →

Error Handling

Handle validation errors by calling validate() after parse(). The ParseOptions fields (including validate) are not yet implemented and have no effect on parse().

import { parse, validate } from 'wiremd';

const ast = parse(userInput);
const errors = validate(ast);
if (errors.length > 0) {
  console.error('Validation errors:', errors.map(e => e.message));
}

Read the error handling guide →

Next Steps

• Parser API Documentation - Detailed parser reference
• Renderer API Documentation - All rendering options
• Type Definitions - Complete type reference
• Plugin API - Create custom renderers
• Error Handling - Handle errors gracefully
• Migration Guides - Upgrade between versions

More Resources

• Getting Started
• Syntax Reference
• Examples
• GitHub Repository
• Live Demo