The Web Platform Framework

Build web applications with speed and simplicity

$ bun create brisa my-app

🚀 Build fast apps fast

Brisa pages are dynamically server-rendered JSX components, with zero JavaScript shipped to the browser by default.

Simple to write; fast to run.

// src/pages/index.tsx
export default function HomePage() {
  return <p>Server-rendered Brisa page</p>;
}

0 bytes

🏝️ Web Component island-based

In Brisa everything runs only on the server by default, except the src/web-components folder, which always run on the client. Web components are rendered on the server (SSR) and hydrated on the client using native Web APIs, where they are transformed into Web Components with Signals.

// src/pages/index.tsx
export default function HomePage() {
  return <custom-counter start={5} />;
}

// src/web-components/custom-counter.tsx
function CustomCounter(props, { state }) {
  const count = state(props.start || 0);

  return (
    <>
      <div>Counter: {count.value}</div>
      <button onClick={() => count.value++}>
        Increment
      </button>
      <button onClick={() => count.value--}>
        Decrement
      </button>
    </>
  );
}

export default CustomCounter;

+3 KB

📲 Browser-events on the server

Brisa mixes ideas from React's "Server Actions" and HTMX concepts. With Brisa, you can handle all browser events on the server, such as forms, click events and more. In addition, we offer extra HTML attributes to manage debounces, optimistic updates, among other things.

You can create a lightweight SPA without Web Components, where the only payload will be that of the Brisa RPC to make the connection with the server.

More about Server Actions

// src/pages/index.tsx
export default function HomePage() {
  function handleInput(event) {
    // This console.log will run on the server
    console.log(event.target.value);
  }

  return (
    <input 
      type="text" 
      onInput={handleInput} 
      debounceInput={400} 
    />
  );
}

+2 KB (RPC code)

🌐 Full i18n support

Brisa has built-in internationalization support that allows you to translate your pages and routes, while loading only the used translations.

More about i18n

// src/pages/index.tsx
export default function HomePage() {
  return <I18nExample />;
}

function I18nExample({}, { i18n: { t, lang } }) {
  console.log(lang); // en-US
  return (
    <p>
      {/* Hello, Brisa! */}
      {t("hello-key", { name: "Brisa" })}
    </p>
  );
}

+0 B (Server Components)

+800 B (Web Components)

📱 Multi-platform

Brisa is fully integrated with Tauri. This means that with a small config change, you can build web applications that can be easily converted to native applications for Android, iOS, and desktop.

// brisa.config.ts
import type { Configuration } from "brisa";

export default {
  // bun, node, static, android, ios, desktop
  output: "android",
} satisfies Configuration;

Web or: .apk, .ipa, .exe, .dmg, .deb

🤔 What does Web Platform Framework mean?

Brisa's mission is to unify server and client using the Web Platform. Web Components can easily be used, using Declarative Shadow DOM and signals to enhance your workflow in conjunction with Server Actions.

We bring concepts from the web to the server. You can capture browser events on the server, such as forms, click events, Web Components events and others. They are progapated through to your server components.

Brisa also streams Hypermedia over the wire during navigation and Server Actions, utilizing HTTP in the way it was originally intended. This is closely connected with Web Components, because they are part of the DOM, their attributes are updated, and signals react to these changes.

With that said, it should be clarified that although we support Web Components, you can create a MPA like a SPA without using any Web Component, the trick is that you only add a Web Component when you need to touch the Web Platform or when a user interaction doesn't require the server.

Brisa's vision is to become the standard for modern web development, offering developers a unified platform that simplifies the creation of high-performance applications from server to client. We focus on maximizing efficiency by minimizing the client-side footprint and enabling developers to build scalable, cross-platform applications that fully leverage the web's native capabilities. We aim to empower developers, regardless of their stack or environment, to use Brisa to create advanced interactive experiences with less friction, driving the adoption of the Web Platform as the foundation for future development.

🎁 Gift to contributors

Brisa is an open-source project, and is backed by contributions from the community. We will send a T-shirt gift to the first contributors who help us improve the framework.

GitHub

📚 Documentation

Learn more about Brisa by reading the Documentation.

💝 Sponsors

Take a look at our Open Collective that we have just opened.

Enjoy Brisa