Skip to content

Getting started

Jump to bottom
Zean Isnomo edited this page Jul 21, 2026 · 3 revisions

Integrating Derakuma is easy on your Javascript/Typescript web app (frameworks like React, Vue, etc, can be used but not entirely necessary), or on your Node.js/Bun app.

This guide may be only for novices looking on how to integrate. For detailed parts, refer to other sections in this wiki.

Integrating with Node.js/Bun

⚠️ Note: You must have at least Node.js 22+ or Bun 1.3.10 or above

If you wish to integrate Derakuma into Node/Bun, you may do so. Depending on your package manager, you can use either:

npm i derakuma

or:

yarn add derakuma

If you are using Bun:

bun add derakuma

Integrating with the web

Derakuma not only supports Node/Bun, but can be accessed on the web. Simply put:

<script src="https://unpkg.com/derakuma@latest/dist/web.min.js" crossorigin="anonymous"></script>

on either <head> or <body>.

Let's use it!

Node/Bun

Derakuma has TypeScript declarations already built in, so you can code your project/app involving Derakuma, in Typescript.

import { DerakumaParser } from 'derakuma';
(async () => {
  const myFont = new DerakumaParser('https://example.com/myfont.bene');
  await myFont.ready();
  const letterA = myFont.getGlyph('A'); // Gets the glyph sets for A, which is U+0041.
  console.log(letterA);
  // Returns a series of drawing commands (which is PenCommand[])
  /* Example: [
    { command: 'PD', x: 0.86, y: 2.57 },
    { command: 'MP', x: 5.14, y: 2.57 },
    { command: 'PU', x: 5.14, y: 2.57 },
    { command: 'PD', x: 0, y: 0 },
    { command: 'MP', x: 3, y: 9 },
    { command: 'MP', x: 6, y: 0 },
    { command: 'PU', x: 6, y: 0 }
  ] */
})();

Derakuma has two methods when loading a font, FETCH and FILE. These can be supplied by importing the FontLoadMethod enum, and can be supplied after the font path.

The difference between FETCH and FILE is the method of loading the .bene font. FETCH does a web request in order to fetch your fonts. This is suitable if your font is fetched from an external URL. FILE, on the other hand, fetches your fonts from your disk. This is significantly faster than FETCH but the main drawback is that you are unable to load external fonts on other networks. However, without anything, Derakuma will use FETCH automatically.

When FILE is selected, you do not need to append await DerakumaParser.ready(); Derakuma will fetch your font files synchronously, so you can start working away. If your font is encoded differently than UTF-8 (e.g. UTF-16LE), you may do so! Append your encoding (part of Node's BufferEncoding) after the font loading method. If no encoding is supplied, Derakuma will read in UTF-8 mode by default.

Here's an example of FILE in action (using path).

import { DerakumaParser, FontLoadMethod } from 'derakuma';
import * as path from 'path'
const myFont = new DerakumaParser('https://example.com/myfont.bene', FontLoadMethod.FILE, 'UTF-16LE');

// Same as above
const letterA = myFont.getGlyph('A');
console.log(letterA);

Web

Integrating in web is vastly different than the privilege you get in Node/Bun. Thankfully, Derakuma is also built for the web, which means you can use the normal Derakuma code you had, but with a catch.

  • You are only locked on FETCH mode.
  • You must wrap Derakuma asynchronously.

You can still initialize Derakuma out of the box, like you would do, just with the caveats highlighted

let myFont; // Have a reference ready
(async () => {
  myFont = new DerakumaParser('https://example.com/myfont.bene');
  await myFont.ready();
  const letterA = myFont.getGlyph('A'); // Gets the glyph sets for A, which is U+0041.
  console.log(letterA);
  // Returns a series of drawing commands 
})();

Using the provided PenCommand[] to draw your glyphs

You can use a variety of methods to draw the glyphs and you only need to pick only one that suits for your application. However, in this example, we will keep it simple and use Canvas2D for now, although you can use other rendering methods (e.g. WebGL, WebGPU) but consider this as a starting point.

Clone this wiki locally