Introduction

Blade is a React framework for building highly dynamic web applications.

Applications built with Blade are fast across all vectors: The first load is instant, while interactions are instant too.

By following the principles of edge compute, Blade meets your users where they are, instead of making them come to you. Your application and the data of your users are pushed as close as possible to them, instead of requiring them retrieve it.

In practice, this means that loading animations of any form (spinners, skeletons, etc) are avoided, ensuring the snappiest and thereby most joyful experience for end users, similar to how a native app feels.

The core of Blade is its query syntax, which allows for instantly reading and writing data.

It combines common data querying patterns of web apps into a syntax that is more powerful than SQL, by making it possible to express complex operations with less code, resulting in a more effective tool for web apps.

In its simplest form, reading a list of records would look like this:

const records = use.accounts();

While writing a record looks like this:

const { add } = useMutation();

add.account.with.handle('test');

This lets you focus on the user experience of your application instead of adding REST APIs, data state management libraries, React server functions, or similar.

Blade manages the state of your data for you. Any mutation you apply is instantly reflected across all read queries, and propagated to other clients in the background.

In general, just like with the data model described above, the majority of programmatic API of Blade revolves around the concept of Hooks:

• use: Read data
• useMutation: Write data
• useLocation: Mimics window.location
• useNavigator: Mimics window.navigator
• useRedirect: Change the page
• useCookie: Read and write cookies
• useJWT: Read JSON Web Tokens
• useParams: Read dynamic path segments
• usePopulatePathname: Populate dynamic path segments
• usePagination: Get the next/previous page of records
• usePaginationBuffer: Concatenate paginated lists

Start building your first application with Blade by installing Bun, which is a JavaScript runtime that powers Blade.

Afterward, run the following command to create a new example application:

bunx @ronin/blade init

A new directory named blade-example will be created as a result, which contains your newly created application.

To start developing it, you can now run this command:

bun run dev

That's it! 🎉 You can now start working on your application.

While Blade supports any fast edge database (zero config support for third-party databases is being worked on), the fastest way to get started is to sign up to RONIN — an SQLite-powered edge database.

After signing up, you will be provided with a RONIN_TOKEN environment variable, which contains the token that can be used to access your SQLite database.

Next, add this environment variable to your Blade application, using a .env file:

RONIN_TOKEN=xxxxxx

Once you've placed this file in the root directory of your project, Blade will automatically read it and use it to access your origin SQLite database, from which it will then automatically retrieve data as needed.

Since every newly created database on RONIN already contains example data, you can now open the pages/index.tsx file of your Blade application and start querying the data:

import { use } from '@ronin/blade/server/hooks';

const Page = () => {
  const posts = use.posts();

  return (
    <div>
      {posts.map(post => <h1>{post.title}</h1>)}
    </div>
  );
};

export default Page;

Since the hook for reading data is reactive, it will automatically update if you write an update somewhere else in your application with the useMutation hook. Similarily, it is automatically revalidated in the background as well, to ensure that the data is always fresh.

To add more kinds of data to your database, you can continue with defining a model, which is essentially how tables are defined when using Blade. Whenever you apply a model, it immediately becomes available for querying, as shown with the post model above.

Now you can also start adding data to your application! 🚀

Feel free to join our Discord community if you have questions or need help getting started. The team would be happy to help you out in realtime.