Lilact

A Little React/JSX Runtime Implementation for the Browser

Docs on GitHub Pages || Demos on GitHub Pages || Official Repository || npm Package || Lilact/Node/Express Demo || Lilact/PHP Demo || Lilact/Python Demo

If you find Lilact useful, please consider sponsoring. Your support funds ongoing maintenance, performance improvements, and new features.
Sponsor me on GitHub

Overview

Lilact is a very lightweight implementation of the React API designed to run in the browser. It can be used as a single script that is around 90kb minified and around 32kb gzipped and includes its whole API. It is tested and works on Chrome, Firefox, Edge, and Safari.

Lilact is very fast, uses minimal resources, and handles memory very efficiently.

In a Node.js environment, Lilact can be incorporated and imported similarly to React, and it can also be used as a static library in other platforms.

JSX Transpiler

Lilact uses its own JSX transpiler (not Babel). It is a recursive-descent parser with lookahead. It doesn’t parse the full JavaScript syntax and instead relies on the JS runtime to detect some errors.

The transpiler is only a few kilobytes and can be incorporated into other React engines as well. It even generates sourcemaps without relying on any third-party library.

There is a transpile.js helper in the bin directory to demonstrate how to use it.

React APIs, Libraries, and Built-in Components

Lilact implements both the legacy class-based API and the modern hook-based API, and it includes almost everything you need.

In addition to the API itself, it bundles the official Redux library (see the redux.jsx example). As a result, it has Redux support and provides all necessary functions and hooks for working with it.

It also includes the amazing @emotion/css library to ease working with styles. You can access it via Lilact.emotion.

For convenience, it already includes components such as:

• HashRouter
• ErrorBoundary
• Suspense
• CSSTransition
• SwitchTransition
• PropTypes

and helper components like:

• Spinner
• SplitPane
• DragHandle

It also includes a specific timeout implementation that can be paused and resumed at will. Lilact’s Suspense includes additional features beyond the standard API.

You can see all available members and methods in the documentation. There is also a list of demos you can view alongside their code at:
Lilact Demo Examples

Note: modules are separated in the documentation to improve structure, but in practice all members and methods are accessible directly via the Lilact object.

ESBuild-based Bundler

An ESBuild based bundler is available in the bin directory. It can be used like this:

npx lilact-bundle --watch --minify --entry client/App.jsx --mode production --name bundle.js --out public/dist

If you add a --watch argument, the bundler will stay running and keep watching the input file(s), and update the bundle if any file is changed.

Using Lilact Outside Node.js (Browser / Script Tag Integration)

Lilact runs in the browser, so if you use Lilact outside Node, it uses eval to run the transpiled scripts, so it cannot use import/export the same way as a module.

Import the Lilact functions using this convention. There is also a require function that you can use to load other JSX or JS files.

const { useState, useRef, render, require } = Lilact;

const App = require('./App.jsx');

To export:

module.exports = ...

Bundled projects can also be used statically on other backends. However, bundling is not required: JSX files can be served and transpiled live.

A complete example of a Lilact project with an express request handler is available at:
lilact-express

An example using it with a PHP/MySQL data store is available at:
lilact-php-demo

An example using it with a Python/SQLite data store is available at:
lilact-python-demo

Installation and Delivery

Node.js (npm)

To use Lilact in other Node projects, install it from the npm public repository:

npm i lilact

Browser / Static (dist + CDN)

To use Lilact in a webpage, first download the source code and extract it. The minified script itself is available in the /dist directory, and the documentation can be found in /docs and also in the source files.

It is also available via unpkg CDN and can be included in HTML like:

<script src="https://unpkg.com/lilact/dist/lilact.development.min.js"></script>

or

<script src="https://unpkg.com/lilact/dist/lilact.production.min.js"></script>

Note: the production version, like the official React API, doesn’t perform PropTypes checks, but you can access PropTypes using Lilact.PropTypes.

After loading, Lilact automatically scans the document for any script elements with type='text/jsx' and runs them. If the src attribute is present on the script, it will load the resource; if the script contains inner content, it will be executed.

This is not the only way to use it—inside Node projects you can use standard module imports and treat Lilact like a normal module.

Lilact wraps browser events to mimic React events. This mimicry is not perfect on some edge cases (because the footprint was important), but it works well overall.

Example

Node.js example

import { render } from "lilact";

function App() {
  return <div>Hello World</div>;
}

render(<App/>, document.body);

Outside Node.js (e.g., PHP / Python integration)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Lilact Demo</title>
  <script src='./lilact.development.min.js' type="module"></script>
</head>
<body></body>
<script type='text/jsx'>
  const { render } = Lilact;

  function App() {
    return <div>Hello World</div>;
  }
  
  render(<App/>, document.body);
</script>
</html>

Learn More / Examples / Beta Status

To know more about using Lilact, see the included examples:
Lilact Examples

For the details, see the documentation.

Lilact is currently in its beta state. It is under heavy testing and improvements are being made. Please report any possible issues or bugs—They will be fixed without any hesitation!

Copyright (C) 2024-2026 Arash Kazemi [email protected]. All rights reserved.

Lilact project is subject to the terms of BSD-2-Clause License. See the LICENSE.TXT file for more details.