Discover Tairu

Tairu is a framework for Tiles: server-defined user interfaces that are uniquely identified by their URLs and can be displayed and interacted with from many different clients.

Server-defined user interface

With server-defined Tiles, developers can easily create and update components to be displayed in multiple clients without having to update the clients themselves.

Tiles structures and defined in JSON and describe the full contents and interactions that needs to be rendered by the client.

Creating a Tile is as simple as defining a handler function, here using JSX as an alternative to using the JSON format:

handler.jsx

import { Text, Tile, handle } from '@tairu/handler'

export default handle(() => {
  return (
    <Tile title="Demo tile">
      <Text>Hello Tairu!</Text>
    </Tile>
  )
})

And then running a HTTP server using the Tairu CLI:

npm

npx tairu serve handler.jsx

pnpm

pnpm dlx tairu serve handler.jsx

The Tile is then accessible at the URL http://localhost:3210 by default.

Universally accessible

A Tile handler is not only able to serve Tiles in their canonical JSON structure, but also to render interactive Tiles directly as HTML pages, or even as fallback (non-interactive) SVG images.

For example, here are a few options to display the Tile defined above:

Tairu CLI

npx tairu open http://localhost:3210

Web browser embed

<iframe src="http://localhost:3210"></iframe>

React embed

Using the tairu/react-dom package:

import { Tile } from '@tairu/react-dom'

function App() {
  return <Tile url="http://localhost:3210" />
}

Authenticated interactions

User actions are authenticated using cryptographic signatures, enabling trusted interactions from Tiles without the need for account creation.

Tairu uses DIDs as unique identifiers for users interacting with Tiles and JSON Web Tokens (JWTs) to authenticate these actions.

The Tairu handler handles verification of the signed actions, provided directly to the handlers:

handler.jsx

import { SubmitAction, Text, TextInput, Tile, handle } from '@tairu/handler'

export default handle((request) => {
  return (
    <Tile
      input={<TextInput label="What is your name?" />}
      actions={<SubmitAction label="Send" />}
      title="Demo tile">
      <Text>Hello {request.action?.value ?? 'stranger'}!</Text>
    </Tile>
  )
})