Sone A declarative Canvas layout engine for JavaScript with advanced rich text support.

• Declarative API
• Flex Layout
• Squircle
• Text Justification
• Table
• Rich Text Rendering
• Composable
• Output as SVG, PDF, Image

---

Overview

• This project uses skia-canvas if you encounter an installation issue, please follow the skia-canvas instruction
• Node.js 16+ or equivalent

npm install sone

import { Column, Span, sone, Text } from "sone";

function Document() {
  return Column(
    Text("Hello, ", Span("World").color("blue").weight("bold"))
      .size(44)
      .color("black"),
  )
    .padding(24)
    .bg("white");
}

// save as buffer
const buffer = await sone(Document()).jpg();

// save to file
import fs from "node:fs/promises";

await fs.writeFile("image.jpg", buffer);

More examples can be found at test/visual directory

Font Registration

import { Font } from 'sone';

if (!Font.has("NotoSansKhmer")) {
  await Font.load('NotoSansKhmer', "test/font/NotoSansKhmer.ttf");
}

Next.js

To make it work with Next.js, update your config file:

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  serverExternalPackages: ["skia-canvas"],
  webpack: (config, options) => {
    if (options.isServer) {
      config.externals = [
        ...config.externals,
        { "skia-canvas": "commonjs skia-canvas" },
      ];
    }
    return config;
  },
};

export default nextConfig;

Acknowledgements

• Thanks Dmitry Iv. for donating the sone package name.
• skia-canvas Awesome JavaScript Skia Canvas binding
• node-canvas
• @napi-rs/canvas
• dropflow
• harfbuzz
• yoga-layout
• vercel/satori
• recanvas
• https://jsfiddle.net/vtmnyea8/
• https://raphlinus.github.io/text/2020/10/26/text-layout.html
• https://mrandri19.github.io/2019/07/24/modern-text-rendering-linux-overview.html
• https://www.khmerload.com/article/208169
• Tep Sovichet

License

Apache-2.0

Seanghay's Optimized Nesting Engine