/liveblock

Primary LanguageJavaScript

GitHub Blocks Template (React version)

Use this repository as a starter template for building your own Blocks using

Quickstart

🛑 Currently, you must be flagged into the GitHub Blocks Technical Preview in order to develop blocks. There is no "offline" development mode at this time.

Fork this repo using the Use this template button above:

"Use this template" button

Then, clone your repo (not this one!) and get ready for action:

yarn # install dependencies
yarn start # start the dev server
# Or use npm, pnpm, you know the drill

When you visit localhost:4000 in your browser, you'll be redirected to the Blocks app, but your locally-developed blocks will appear in the block picker:

Block picker

(if you're using Safari (or another browser that doesn't permit calling http URLs from an https page), run yarn start-https and visit https://localhost:4000 instead.)

This template includes one example File Block and one Folder Block. The dev server supports hot reloading, so make some changes, and see what they do!

Under the hood

With this template, Blocks are React components. They have a well-defined contract with their surroundings, and receive a fixed set of props when they are instantiated. They are developed in TypeScript, and bundled with Vite.

More Info

Visit githubnext/blocks for a full tutorial, documentation, and examples.

You should also join us in our discord! There's a #blocks channel where you can connect with us and other folks who are building Blocks:

👋 https://discord.gg/githubnext

License

MIT

✌️ ❤️ GitHub Next