React Fabrio documentation
Build a product personalization experience in your React application.
React Fabrio is an MIT-licensed React 19 library for personalizing printed and engraved products. It includes an editor and React controls for building your own interface. Editing, previews and production use the same physical design document.
Run the packages from this repository's pnpm workspace to evaluate them. Start with the Quick Start to edit, save and reopen a design locally. Read product scope before planning a customer release.
Learn with a tutorial
Quick Start walks through a complete editing session in the playground. You need Node.js and pnpm; no upload service or backend is required.
Complete an integration task
Start with Embed the React editor, then choose the task you need:
| I want to… | Guide |
|---|---|
| Define physical areas and editing rules | Configure a product |
| Save customer work and reopen it later | Save and reopen designs |
| Make uploaded images survive a session | Connect durable uploads |
| Change the interface language | Localize the editor |
| Store production files after confirmation | Handle confirmation |
| Update an older integration | Migration |
Look up a contract
Look up public exports and callbacks in the API reference. For field definitions and behavior, see product configuration, saved documents, assets and fonts, previews, production output and editor interactions. Example products describe the fixtures used by the playground.
Understand the design
Product scope explains guided and freeform personalization and the host application's responsibilities. Architecture explains package boundaries and why the document uses physical coordinates. The root glossary defines the shared vocabulary.
Contribute
Read Contributing to work on the library or Maintain the documentation to edit this site. Release acceptance lists the remaining release checks. Agents should begin with domain orientation.