Browser and Markdown

Use Wire Lang 0.4.0 in plain HTML, Markdown, or MDX. Choose browser rendering for source blocks already on a page, or static rendering to generate SVG during your build.

Choose a package

wire-lang: the CLI and convenience library API.
@wire-lang/core: parsing, compilation diagnostics, layout, and SVG rendering for editors and custom integrations. The live editor on this website uses this package.
@wire-lang/browser: discover and render source blocks after HTML loads.
@wire-lang/markdown: remark, rehype, and MDX integration. Code fences are preserved by default; pass { mode: "static" } to generate inline SVG.

jsDelivr CDN

Paste this module script inside your site's <head>. It loads the latest browser package and waits for the HTML to be ready before rendering Wire blocks.

<script type="module">
  import wire from "https://cdn.jsdelivr.net/npm/@wire-lang/browser/dist/index.js";

  const { errors } = await wire.initialize();
  for (const { element, error } of errors) {
    console.error("Could not render Wire diagram", element, error);
  }
</script>

Place your schematic blocks in the page body using the language-wire class:

<pre><code class="language-wire">schematic
  component R1 Resistor value=220ohm
  component D1 LED color=red
  connect R1.1, D1.A
</code></pre>

These versionless URLs resolve to the latest version published on npm and will follow future releases.

Package	CDN URL
`wire-lang`	https://cdn.jsdelivr.net/npm/wire-lang
`@wire-lang/core`	https://cdn.jsdelivr.net/npm/@wire-lang/core
`@wire-lang/cli`	https://cdn.jsdelivr.net/npm/@wire-lang/cli
`@wire-lang/browser`	https://cdn.jsdelivr.net/npm/@wire-lang/browser
`@wire-lang/markdown`	https://cdn.jsdelivr.net/npm/@wire-lang/markdown

For direct browser rendering, use @wire-lang/browser. CDN availability does not make the CLI or Markdown build plugins browser-compatible. Pin a version in production imports for reproducible behavior.

Plain HTML with a CDN

No bundler is needed. Save this as an HTML file and serve it from your website. Pin the package version so future releases do not change your diagrams unexpectedly.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>Wire Lang diagram</title>
<pre><code class="language-wire">schematic
  component R1 Resistor value=220ohm
  component D1 LED color=red
  connect R1.1, D1.A
</code></pre>
<script type="module">
  import wire from "https://cdn.jsdelivr.net/npm/@wire-lang/browser@0.4.0/dist/index.js";

  const { errors } = await wire.initialize();
  for (const { element, error } of errors) {
    console.error("Could not render Wire diagram", element, error);
  }
</script>
</html>

The published browser module bundles the core renderer and has no external JavaScript imports. Importing it does not start rendering: initialize() waits for the DOM to be ready, then discovers the blocks.

Browser rendering with npm

npm install @wire-lang/browser@0.4.0

import wire from "@wire-lang/browser";

const { errors } = await wire.initialize();
for (const { element, error } of errors) {
  console.error("Could not render Wire diagram", element, error);
}

Discovery matches pre > code.language-wire, pre.wire-lang, code.wire-lang. Successful rendering hides the source and inserts a sibling .wire-lang-diagram containing the SVG. Source remains in the DOM. Invalid blocks keep their source and receive a data-wire-error attribute; other blocks still render.

After client navigation or content insertion, call await wire.run(). Repeated calls do not duplicate diagrams, and edited source is rendered again. Use await wire.run({ force: true }) to rerender unchanged source. For React or MDX, run discovery from a client effect after hydration and scope it to the content container.

The async API yields between diagrams, but compilation and layout still run on the main thread. It does not watch DOM changes automatically. Use static rendering when diagrams must appear without JavaScript.

Markdown and static SVG

Write a complete schematic inside a wire fence. If your Markdown processor emits pre > code.language-wire, initialize the browser package above; no Wire Markdown plugin is needed. Preserve the class and source text through syntax highlighting.

```wire
schematic
  component R1 Resistor value=220ohm
  component D1 LED color=red
  connect R1.1, D1.A
```

For SVG generated during the build, install the ESM packages below with Node.js 20 or newer:

npm install @wire-lang/markdown@0.4.0 unified remark-parse remark-rehype rehype-stringify

import { remarkWire } from "@wire-lang/markdown";
import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkRehype from "remark-rehype";
import rehypeStringify from "rehype-stringify";

const markdown = "```wire\nschematic\n  component R1 Resistor value=220ohm\n```";
const html = await unified()
  .use(remarkParse)
  .use(remarkWire, { mode: "static" })
  .use(remarkRehype)
  .use(rehypeStringify)
  .process(markdown);

Alternatively, use rehypeWire after remarkRehype. Use one Wire plugin per pipeline. Both produce structured HTML nodes without raw HTML support. Static mode fails the document build on fatal Wire diagnostics, with locations in the original source.

MDX

npm install @wire-lang/markdown@0.4.0 @mdx-js/mdx

import { compile } from "@mdx-js/mdx";
import { rehypeWire } from "@wire-lang/markdown";

const mdx = "```wire\nschematic\n  component R1 Resistor value=220ohm\n```";
const result = await compile(mdx, {
  rehypePlugins: [[rehypeWire, { mode: "static" }]],
});

Without mode: "static", the plugins preserve fences for the browser runtime. These integrations require control over your site's scripts or build; they do not add native Wire support to GitHub Markdown.

If sanitizing user-authored HTML, place the sanitizer before static rehypeWire. A sanitizer after static remarkWire needs an SVG-aware schema.