@subvertic/vrl-svelte

Svelte adapter for Vertical Route Language.

This package exposes an SSR-friendly markup helper, a diagram state helper, and a Svelte component for rendering VRL diagrams through the core and SVG renderer packages.

Install

npm install @subvertic/vrl-svelte svelte

Usage

<script>
  import VrlDiagram from "@subvertic/vrl-svelte/VrlDiagram.svelte";

  export let source = "";
</script>

<VrlDiagram
  {source}
  options={{ language: "es", symbology: "federation", layout: { pixelsPerMeter: 6 } }}
/>

import { createVrlSvelteDiagramState, renderVrlSvelteMarkup } from "@subvertic/vrl-svelte";

const diagram = createVrlSvelteDiagramState(source, {
  symbology: "spanish",
  language: "es",
  layout: { pixelsPerMeter: 6 }
});
const html = renderVrlSvelteMarkup("", {}, { diagram });

Component Props

{
  source: string,
  options: object,
  diagram: object | null,
  className: string,
  diagnosticsClassName: string,
  role: string
}

Pass source for simple use. Pass diagram from createVrlSvelteDiagramState when a parent component or server route owns compilation.

Compiler layout options live under options.layout, including width, spineX, horizontalScale, marginY, marginBottom, pixelsPerMeter, and minNodeGap. Renderer options such as language, locale, symbology, legend, theme, and themeTokens live at the top level. The diagram legend is enabled by default; set legend: false when the page provides its own explanation.

SSR Helper

import { renderVrlSvelteMarkup } from "@subvertic/vrl-svelte";

const html = renderVrlSvelteMarkup(
  source,
  { language: "es", symbology: "spanish" },
  { className: "route-diagram", role: "img" }
);

Invalid source renders escaped diagnostics in a <pre> block. Valid source renders the SVG inside an escaped wrapper <div>.

License

MIT. Copyright (c) 2026 Pedro Guzmán.