blueprint-docs.readthedocs.io Open in urlscan Pro
2606:4700::6811:2052  Public Scan

Form analysis
0 forms found in the DOM

Text Content

 * Blueprint Documentation
 * 
 * Home
 * Quick Start
 * Tutorial
 * Why Blueprint
 * Architecture
 * Examples
 * 
 * Published with MkDocs
 * Theme by GitBook


WELCOME TO BLUEPRINT

Hooks for the Backend

Server-side hooks function similarly to React hooks but operate on your backend.
These hooks have access to frontend state, react to changes in that state,
trigger re-renders, and are type-safe. Blueprint, an express middleware, syncs
React state with your backend, allowing you to write server-side hooks without
affecting your existing endpoint.

HOW TO GET STARTED?

Get started with the quick start guide (2 mins) or by following the hello world
tutorial (10 mins).

A SIMPLE EXAMPLE

Code:

//server
import {app, useState, useQuery} from "blueprint-server";

const area = (width: number, height: number) =>
  width * height;

const myApp = app(() => {
  const width$ = useState("width", 10);
  const height$ = useState("height", 15);
  const area$ = useQuery(area, [width$, height$]);

  return {
    name: "myApp",
    state: [width$, height$],
    queries: [area$]
  };
}); 


//frontend
import {app, state, query} from "blueprint-react";

const MyApp = app("myApp");
const useWidth = state<number>("myApp", "width");
const useHeight = state<number>("myApp", "height");
const useArea = query<number>("myApp", "area");

const UI = () => {
  const [width, setWidth] = useWidth();
  const [height, setHeight] = useHeight();
  const [area] = useArea();


  return (
    <MyApp>
      <input defaultValue={width} onChange={e => setWidth(e.target.value)} />
      <input defaultValue={height} onChange={e => setHeight(e.target.value)} />
      <div>Area of Rectangle: {area}</div>
    </MyApp>
  );
};



Result:


Diagram:

Additionally, Blueprint generates a diagram of data dependencies for your web
application allowing devs to visualize their architecture.




MORE EXAMPLES

Find more examples here. Or go straight to the flagship example: user management
app.

EthicalAds are coming soon to your documentation site. Learn more.
Ads by EthicalAds
×