Building Layouts

Node are the foundation of building layouts with Takumi, its a simplified version of DOM tree but in JSON format, with only three types of nodes by default: Container, Text, and Image.

If you are building in JavaScript, the @takumi-rs/helpers package provides helper functions to build node tree or convert React components into Takumi nodes.

Prerequisites

Make sure you have installed the @takumi-rs/helpers package:

npm i @takumi-rs/helpers

Constructing Nodes

Container Node

A container node is used to group other nodes and arrange them in a layout.

import { container, percentage } from "@takumi-rs/helpers";

const root = container({
  style: {
    // styling goes here
    width: percentage(100),
    height: percentage(100),
    backgroundColor: "white",
  },
  children: [
    // child nodes go here
  ],
});

{
  "type": "container",
  "style": {
    "width": "100%",
    "height": "100%",
    "backgroundColor": "white"
  },
  "children": []
}

Text Node

A text node displays text, check out Rendering Text deep dive guide for more details on how to render text.

import { text } from '@takumi-rs/helpers';

const helloText = text('Hello, Takumi!', {
  // styling goes here
  color: "yellow",
});

{
  "type": "text",
  "text": "Hello, Takumi!",
  "style": {
    "color": "yellow"
  }
}

Image Node

An image node displays an image from a URL or local path, check out Loading External Images deep dive guide for more details on how to load images.

import { image, percentage } from '@takumi-rs/helpers';

const logo = image({
  src: "logo.png",
  width: 64,
  height: 64,
  style: {
    // styling goes here
    borderRadius: percentage(50),
  },
});

{
  "type": "image",
  "src": "logo.png",
  "width": 64,
  "height": 64,
  "style": {
    "borderRadius": "50%"
  }
}