Quick Start

Install @boundsvg/core first — see Installation.

Node.js (Core)

// tsconfig.json: { "jsx": "react-jsx", "jsxImportSource": "@boundsvg/core" }
import { createEngineAsync, Canvas, Flex, Text } from "@boundsvg/core";
import fs from "node:fs";

const fontData = fs.readFileSync("path/to/NotoSansJP-Regular.ttf");

const engine = await createEngineAsync({
  fonts: [
    { alias: "NotoSansJP", data: fontData, weight: 400, style: "normal" },
  ],
});

const node = (
  <Canvas width={600} height={200} background="#ffffff">
    <Flex
      direction="column"
      alignItems="center"
      justifyContent="center"
      width={600}
      height={200}
    >
      <Text font="NotoSansJP" fontSizePx={32} color="#333333">
        Hello, boundsvg!
      </Text>
    </Flex>
  </Canvas>
);

const svg = engine.renderToSvg(node);
console.log(svg);

Output:

<Canvas width={600} height={200} background="#ffffff">
  <Flex
    direction="column"
    alignItems="center"
    justifyContent="center"
    width={600}
    height={200}
  >
    <Text font="NotoSansJP" fontSizePx={32} color="#333333">
      Hello, boundsvg!
    </Text>
  </Flex>
</Canvas>

Generated SVG

<svg xmlns="http://www.w3.org/2000/svg" data-boundsvg-node-id="auto:0" viewBox="0 0 600 200" width="600" height="200">
  <rect x="0" y="0" width="600" height="200" fill="#ffffff"/>
  <g data-boundsvg-node-id="auto:0.0">
    <g data-boundsvg-node-id="auto:0.0.0">
      <g data-boundsvg-node-id="auto:0.0.0" data-boundsvg-text="Hello, boundsvg!" aria-label="Hello, boundsvg!">
        <path d="M177.23 112.36V88.9h2.95v9.83h10.94V88.9h2.98v23.46h-2.98V101.29H180.18v11.07zM207.28 112.78q-2.34 0-4.22-1.09-1.89-1.09-3-3.12-1.1-2.03-1.1-4.88q0-2.15.64-3.83t1.74-2.88q1.11-1.2 2.52-1.82q1.4-.62 2.88-.62q2.24 0 3.77.99q1.54.99 2.35 2.83.82 1.84.82 4.34q0 .48-.03.89-.03.42-.1.77H201.84q.1 1.86.85 3.22t2 2.11t2.91.75q1.28 0 2.32-.37t2.03-1.01l1.03 1.96q-1.12.73-2.53 1.24-1.41.52-3.17.52zM201.81 102.28h9.31q0-2.62-1.14-4.02-1.13-1.39-3.18-1.39-1.22 0-2.29.64t-1.79 1.83q-.72 1.18-.91 2.94zM221.04 112.78q-1.09 0-1.76-.45t-.99-1.33-.32-2.1V86.89h2.94V109.1q0 .67.24.96.24.28.56.28.13 0 .26-.01.13-.02.35-.05l.42 2.24q-.32.1-.71.18-.38.08-.99.08zM230.13 112.78q-1.09 0-1.76-.45t-.99-1.33-.32-2.1V86.89H230V109.1q0 .67.24.96.24.28.56.28.13 0 .26-.01.12-.02.35-.05l.41 2.24q-.32.1-.7.18t-.99.08zM242.9 112.78q-2.12 0-3.97-1.08-1.86-1.07-2.96-3.1-1.11-2.03-1.11-4.91q0-2.91 1.11-4.95q1.1-2.03 2.96-3.12q1.85-1.08 3.97-1.08q1.6 0 3.05.6q1.46.61 2.58 1.8q1.12 1.18 1.76 2.88.64 1.69.64 3.87q0 2.88-1.12 4.91t-2.95 3.1q-1.82 1.08-3.96 1.08zM242.9 110.34q1.5 0 2.64-.83q1.13-.83 1.77-2.33.64-1.51.64-3.49q0-2.02-.64-3.52-.64-1.51-1.77-2.34-1.14-.83-2.64-.83-1.51 0-2.64.83-1.14.83-1.76 2.34-.63 1.5-.63 3.52q0 1.98.63 3.49.62 1.5 1.76 2.33q1.13.83 2.64.83zM254.54 118.44l-.7-1.73q1.5-.67 2.37-1.82.86-1.15.83-2.63l-.32-2.62l1.44 2.14q-.32.36-.69.5t-.78.14q-.87 0-1.51-.54t-.64-1.5.66-1.51q.66-.54 1.55-.54q1.15 0 1.81.91t.66 2.51q0 2.31-1.27 4.03-1.26 1.73-3.41 2.66zM278.8 112.78q-1.18 0-2.5-.58-1.31-.58-2.43-1.63h-.13l-.25 1.79h-2.34V86.89h2.95v6.97l-.13 3.11q1.18-1.03 2.59-1.73t2.88-.7q2.24 0 3.78 1.1q1.53 1.1 2.33 3.09.8 1.98.8 4.67q0 2.94-1.07 5.06-1.07 2.11-2.78 3.21-1.72 1.11-3.7 1.11zM278.32 110.31q1.44 0 2.58-.81q1.13-.82 1.77-2.37t.64-3.7q0-1.92-.46-3.37-.47-1.46-1.46-2.26T278.7 97q-1.08 0-2.24.61-1.15.61-2.36 1.76v9.15q1.12.99 2.25 1.39q1.14.4 1.97.4zM297.68 112.78q-2.11 0-3.97-1.08-1.85-1.07-2.96-3.1-1.1-2.03-1.1-4.91q0-2.91 1.1-4.95q1.11-2.03 2.96-3.12q1.86-1.08 3.97-1.08q1.6 0 3.06.6q1.45.61 2.57 1.8q1.12 1.18 1.76 2.88.64 1.69.64 3.87q0 2.88-1.12 4.91t-2.94 3.1q-1.83 1.08-3.97 1.08zM297.68 110.34q1.5 0 2.64-.83t1.78-2.33q.64-1.51.64-3.49q0-2.02-.64-3.52-.64-1.51-1.78-2.34t-2.64-.83-2.64.83-1.76 2.34q-.62 1.5-.62 3.52q0 1.98.62 3.49.62 1.5 1.76 2.33t2.64.83zM315.41 112.78q-2.75 0-4.05-1.73t-1.3-5.06V94.98h2.95v10.66q0 2.4.77 3.5.76 1.11 2.49 1.11q1.35 0 2.4-.71q1.06-.7 2.31-2.24V94.98h2.91v17.38h-2.43l-.23-2.72h-.09q-1.22 1.41-2.58 2.27-1.36.87-3.15.87zM329.74 112.36V94.98h2.4l.29 2.53h.07q1.24-1.25 2.64-2.11q1.39-.86 3.18-.86q2.75 0 4.03 1.74t1.28 5.07v11.01h-2.91V101.74q0-2.47-.78-3.56-.79-1.08-2.52-1.08-1.34 0-2.4.67-1.05.67-2.33 1.98v12.61zM355.18 112.78q-2.17 0-3.79-1.06-1.61-1.06-2.49-3.09t-.88-4.94q0-2.82 1.05-4.87q1.06-2.04 2.77-3.16t3.7-1.12q1.53 0 2.64.52q1.1.53 2.25 1.49l-.16-2.97V86.89h2.95v25.47h-2.4l-.26-2.05h-.1q-1.02 1.03-2.36 1.75-1.35.72-2.92.72zM355.82 110.31q1.22 0 2.31-.59t2.14-1.78V98.82q-1.09-.99-2.11-1.4-1.02-.42-2.11-.42-1.38 0-2.51.85-1.14.85-1.83 2.33-.69 1.49-.69 3.48q0 2.08.58 3.58t1.65 2.29q1.07.78 2.57.78zM373.65 112.78q-1.83 0-3.54-.69t-2.93-1.71l1.41-1.96q1.15.93 2.37 1.51q1.22.57 2.78.57q1.73 0 2.58-.78t.85-1.94q0-.89-.59-1.48-.6-.6-1.51-1.03t-1.87-.78q-1.22-.48-2.38-1.07-1.17-.6-1.92-1.54-.76-.94-.76-2.42q0-1.4.71-2.51.7-1.1 2.05-1.76q1.34-.65 3.23-.65q1.6 0 2.99.57q1.39.58 2.38 1.41l-1.4 1.82q-.9-.64-1.84-1.08-.95-.45-2.1-.45-1.66 0-2.45.75-.78.75-.78 1.78q0 .8.53 1.34.52.54 1.39.91.86.37 1.82.75.96.36 1.91.77.94.42 1.69.99.75.58 1.22 1.43.46.85.46 2.09q0 1.41-.72 2.6-.72 1.18-2.11 1.87t-3.47.69zM387.82 112.36l-6.27-17.38h3.04l3.27 9.89q.41 1.28.81 2.58.4 1.29.79 2.54h.16q.41-1.25.81-2.54.4-1.3.79-2.58l3.29-9.89h2.88l-6.14 17.38zM406.61 120.36q-2.11 0-3.75-.54-1.63-.55-2.52-1.59-.9-1.04-.9-2.51q0-1.12.67-2.16t1.89-1.78v-.16q-.67-.41-1.12-1.12-.45-.7-.45-1.72q0-1.09.63-1.92.62-.84 1.29-1.32v-.12q-.86-.68-1.57-1.89-.7-1.22-.7-2.79q0-1.92.9-3.31.89-1.39 2.38-2.14t3.22-.75q.76 0 1.39.12.62.13 1.07.32h6.05v2.24h-3.55q.64.61 1.02 1.54t.38 2.05q0 1.85-.84 3.21-.85 1.36-2.29 2.1t-3.23.74q-.61 0-1.3-.16t-1.26-.45q-.48.38-.8.86t-.32 1.22q0 .8.64 1.34.64.55 2.4.55h3.42q3.01 0 4.53.99t1.52 3.13q0 1.6-1.09 2.98t-3.06 2.21q-1.96.83-4.65.83zM406.58 104.87q1.02 0 1.87-.51t1.34-1.44q.5-.93.5-2.18q0-1.28-.5-2.19-.49-.91-1.33-1.39-.83-.48-1.88-.48-1 0-1.84.48-.85.48-1.35 1.38-.49.89-.49 2.2q0 1.25.51 2.18t1.34 1.44t1.83.51zM407.02 118.34q1.67 0 2.9-.51t1.92-1.33q.69-.81.69-1.68q0-1.24-.9-1.72-.89-.48-2.62-.48H406q-.48 0-1.07-.05t-1.17-.21q-.93.64-1.34 1.42-.42.79-.42 1.52q0 1.38 1.33 2.21t3.69.83zM420.02 105.29l-.42-13.57-.06-3.33h2.94l-.06 3.33-.39 13.57zM421.01 112.78q-.87 0-1.49-.63-.62-.62-.62-1.58q0-1.03.62-1.63.62-.61 1.49-.61.89 0 1.5.61.61.6.61 1.63q0 .96-.61 1.58-.61.63-1.5.63z" fill="#333333"/>
      </g>
    </g>
  </g>
</svg>

React (Browser)

import { BoundSvg, Canvas, Text } from "@boundsvg/react";
import { BoundSvgProvider } from "@boundsvg/react/provider";

TIP

See the React Integration Guide for a complete example.