The front end
just went full-stack

Convex is the global state management platform for web developers.

Create your project with zero setup
Use simple backend functions to store and sync your app's shared state
Bind global state to your React app
Watch your app update live with automatic subscriptions

Terminal

› npx convex init

convex/listMessages.js

1
2
3
4
5
6
import { query } from "./_generated/server";

// List all chat messages.
export default query(async ({ db }) => {
  return await db.table("messages").collect();
});

convex/sendMessage.ts

1
2
3
4
5
6
7
import { mutation } from "./_generated/server";

// Send a chat message.
export default mutation(({ db }, body: string) => {
  const message = { body, time: Date.now() };
  db.insert("messages", message);
});

Terminal

› npx convex push

src/App.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { 
  useQuery, 
  useMutation
} from "../convex/_generated/react";

function App() {
  // Reactively load the current messages.
  const messages = useQuery("listMessages") ?? [];

  // Send a message using a mutation.
  const sendMessage = useMutation("sendMessage");
  
  return (
    <div>
      {messages.map(message => 
        <Message message={message} />
      )}
      <button onClick={() => sendMessage("hello")}>
        Say Hello
      </button>
    </div>
  )
}

End-to-end reactivity

Convex tracks all changes to your global state. When any client updates shared state, React components around the world automatically re-render.

Full ACID transactions and consistent client views

Between serializable snapshot isolated mutations and fully consistent, reactive queries, Convex handles correctness so you don't have to.

Automatic caching for lightning-fast performance

Convex caches all of your application's state automatically. The cache is automatically invalidated and always correct so you get performance and scale out of the box.