Getting Started

What is Reactlit?

Reactlit is a headless, micro-app framework for React inspired by the simplicity of python’s Streamlit and modeled on the API of Observable Framework. A Reactlit is a React component that you can add to your existing React app. It takes an async function in which you can define your UI procedurally.

Take a look at the following example to see how it works

Hello World Example

Hello World

hello-world.tsx

import { Reactlit } from '@reactlit/core';
import { TextInput } from './inputs/basic-text-input';

export default function HelloWorld() {
  return (
    <Reactlit>
      {async ({ display, view }) => {
        const name = view('name', TextInput);
        if (!name) {
          throw new Error('Name is required');
        }
        display(<div>Hello {name}</div>);
      }}
    </Reactlit>
  );
}

TextInput

inputs/basic-text-input.tsx

import { defineView } from '@reactlit/core';

export const TextInput = defineView<string>(({ value, setValue, stateKey }) => (
  <input
    id={stateKey}
    value={value ?? ''}
    autoComplete="off"
    spellCheck={false}
    onChange={(e) => setValue(e.target.value)}
    placeholder={`Enter ${stateKey}`}
  />
));

See it live:

Why procedural UI?

By defining UI procedurally you can treat your UI as functions that return data. This makes it easier to read and understand what the code is doing. Modern hook-based React has a lot of complexity. You have to know when to memoize, you have to follow the rules of hooks and declare their dependencies. Reactlit can’t compete with the flexibility of React, but for many simpler use cases, it offers a higher-level abstraction that can result in code that is simpler and often shorter as well.

By implementing this abstraction in pure React, you can reuse your existing React application and all of its components.

Let’s rewrite the same example as above, but this time we’ll use native React.

hello-world-react.tsx

import { useState } from 'react';

export default function HelloWorldReact() {
  const [name, setName] = useState('');
  let display = <div>Hello {name}</div>;
  if (!name) {
    display = <div style={{ color: 'red' }}>Name is required</div>;
  }
  return (
    <div>
      <input
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter name"
      />
      {display}
    </div>
  );
}

While similar in length, in order to read through this code you have to jump around. The state gets instantiated on line 4, but then set down on line 13 and used on lines 5 and 12. Notice how some of these are above the setName and some are below. There are many ways to write this logic and the code can be ordered in many ways. This leads to a less consitent experience when reading the code.

Especially when dealing with and responding to a lot of user input, the React model can be cumbersome. Reactlit is designed to give you another option in these situations.