🚀 Build fast apps fast

Brisa pages are dynamically server-rendered JSX components, withzero JavaScript shipped to the browserby default.

Simple to write; fast to run.

// src/pages/index.tsxexport 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 thesrc/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 withSignals.

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

// src/web-components/custom-counter.tsxfunction CustomCounter(props, {state }) {  const count = state(props.start|| 0);  return (    <>      <div>Counter: {count.value}</div>      <button onClick={()=> count.value--}>        Decrement      </button>      <button onClick={()=> count.value++}>        Increment      </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 extraHTML attributes to manage debounces, optimistic updates, among other things.

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

// src/pages/index.tsxexport 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 totranslate your pages androutes, while loading only the used translations.

// src/pages/index.tsxexport 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 forAndroid,iOS, anddesktop.

// brisa.config.tsimport type { Configuration }from "brisa";export default {  // bun, node, deno, 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, usingDeclarative Shadow DOM andsignals to enhance your workflow in conjunction withServer Actions.

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

Brisa alsostreams 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 aSPA 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 aunified platform that simplifies the creation of high-performance applications from server to client. We focus on maximizing efficiency byminimizing 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 theWeb Platform as the foundation forfuture development.

🎁 Gift to contributors

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

📚 Documentation

Learn more about Brisa by reading theDocumentation.

💝 Sponsors

Take a look at ourOpen Collective that we have just opened.