https://brisa.build/

Brisa Framework logoBrisa
[                    ]Ctrl+K
[                    ]

to navigate to selectesc to close

  * Docs
  * Playground
  * Examples
  * Blog
  * 0.1.0

  * 

  *  
  *  
  *  

Brisa Framework logo

The Web Platform Framework

Build web applications with speed and simplicity

Get Started

$ bun create brisa my-app

 

 Build fast apps fast

Brisa pages are dynamically server-rendered JSX components, so
there's 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 by default runs only on the server, except the
src/web-components folder that also runs on the client. Web
components are rendered on the server (SSR) and hydrated on the
client using native Web APIs, as they are transformed into Web
Components with Signals.

Counter: 5

IncrementDecrement

// 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 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, etc. In addition, we offer some extra HTML
attributes to manage debounces, optimistic updates, etc.

The idea is that if you want you can create a SPA without Web
Components, only with the weight 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 a built-in internationalization (i18n) support that allows
you to translate your pages and routing, carrying only the
translations you consume.

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 allows you to build web applications that can be easily
converted to native applications for Android, iOS, and desktop. It's
full integrated with Tauri.

Multi-platform

// 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

 Web Platform Framework?

Brisa's mission is to unify the both worlds (server and client) using
the Web Platform. One key feature is the ease with which Web
Components can be used, utilizing Declarative Shadow DOM and signals
to enhance your workflow in conjunction with Server Actions.

We bring ideas from the Web to the server. You can capture browser
events on the server, such as forms, click events, Web Components
events, etc. And you can propagate them through your server
components.

It 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.

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 grace 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.

Brisa launch of 0.1 Launch of v0.1

 Gift to contributors

Brisa is an open-source project, and we welcome contributions from
the community. We have a T-shirt gift for the first contributors who
help us improve the framework.

GitHub
Brisa T-shirt gift

 Documentation

Learn more about Brisa by reading the Documentation.

 Sponsors

We are going to open Open-Collective soon. Subscribe to the
newsletter to keep tunned.

Enjoy using it

Let's keep in touch

Enter your email to stay up to date with the latest updates from
Brisa.

[                    ]Subscribe to our newsletter
Content

  * Docs
  * Playground
  * Examples
  * Blog 

Social

  * Twitter (x)
  * Discord
  * GitHub
  * YouTube

Legal

  * Privacy Policy
  * Terms of Service

MIT License (c) 2024 Brisa Framework

contact@brisa.build