red-otter
Self-contained WebGL flexbox layout engine.
Documentation
Install
yarn add red-otter
To render text you will also need to generate the font atlas. See guide.
For editor to correctly highlight TypeScript code, add to compilerOptions in tsconfig.json:
{
"jsx": "react-jsx",
"jsxImportSource": "red-otter/dist"
}Usage
import { Font, Context, Layout } from "red-otter";
const canvas = document.getElementById("app");
const font = new Font({
spacingMetadataJsonURL: "/spacing.json",
spacingBinaryURL: "/spacing.dat",
UVBinaryURL: "/uv.dat",
fontAtlasTextureURL: "/font-atlas.png",
});
await font.load();
const context = new Context(canvas, font);
context.clear();
const layout = new Layout(context);
layout.add(
<view style={{ width: 100, height: 100, backgroundColor: "#fff" }}>
<text style={{ fontFamily: font, fontSize: 20, color: "#000" }}>Hello</text>
</view>
);
layout.render();
context.flush();