@subvertic/vrl-sveltekit

SvelteKit load helpers for Vertical Route Language.

This package compiles VRL source into serializable diagram data that can be returned from SvelteKit load functions and rendered with a Svelte component.

Install

npm install @subvertic/vrl-sveltekit @sveltejs/kit svelte

Usage

import { createVrlSvelteKitLoad } from "@subvertic/vrl-sveltekit";

export const load = createVrlSvelteKitLoad({
  source: async ({ fetch }) => {
    const response = await fetch("/routes/quebrada-gata.vrl");
    return response.text();
  },
  options: { language: "es", symbology: "spanish", layout: { pixelsPerMeter: 6 } }
});

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

  export let data;
</script>

<VrlDiagram {data} />

If your load function uses a custom key, pass the same key to the component:

<VrlDiagram {data} diagramKey="diagram" />

Load Helpers

import { createVrlSvelteKitData, createVrlSvelteKitLoad } from "@subvertic/vrl-sveltekit";
import { loadRouteSource } from "$lib/routes";

• createVrlSvelteKitData(source, options) returns serializable diagram state.
• createVrlSvelteKitLoad({ source, options, key }) returns an async SvelteKit load function.

source and options can be values or functions that receive the SvelteKit load event:

export const load = createVrlSvelteKitLoad({
  key: "routeDiagram",
  source: ({ params }) => loadRouteSource(params.slug),
  options: ({ url }) => ({
    symbology: url.searchParams.get("profile") ?? "federation",
    language: url.searchParams.get("lang") ?? "es",
    layout: { pixelsPerMeter: 6 }
  })
});

<VrlDiagram {data} diagramKey="routeDiagram" />

Component Props

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

The component reads data.vrl by default. Passing diagram overrides data[diagramKey].

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.

License

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