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
• 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
• 🔧 Troubleshooting Guide - 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
• 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 } from 'wiremd';

const ast = parse('## Heading\n[Button]', {
  position: true,  // Include position info
  validate: true,  // Validate during parse
  strict: false    // Strict mode
});

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 parsing and validation errors gracefully:

import { parse } from 'wiremd';

try {
  const ast = parse(userInput, { validate: true });
} catch (error) {
  console.error('Parse error:', error.message);
  if (error.position) {
    console.error(`At line ${error.position.start.line}`);
  }
}

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 Guide
• Syntax Reference
• Examples
• GitHub Repository
• Live Demo