"Explorer" is the codename for the next gen frontend for Open Food Facts, built with modern web technologies (SvelteKit, Tailwind CSS, etc). It is currently in early development, and is not yet ready for production use. However, it is already possible to use it for development and testing purposes.
By building a new frontend, we want to be able to iterate faster on the user experience, provide a more modern and responsive design, and make it easier for contributors to contribute to the frontend.
Warning
While we support the usage of LLM-based tools to enhance productivity, we expect every contributor to review, test and more importantly take full responsibility of any code generated by these tools before opening a Pull Request.
Remember that most people here are volunteers, and the free time they spend on this project is time they could have spent with their family, friends, or on other hobbies. Please respect that by making sure your contributions are of high quality and don't create extra work for the maintainers.
For more information, see the Contribution Guidelines.
| Guide | Audience |
|---|---|
| CONTRIBUTING.md | Humans contributing code |
| AGENTS.md | AI agents (Claude, Copilot, Codex, etc.) |
| DESIGN.md | Anyone building or reviewing UI |
New to the project? Check out our Design Guide for patterns, colors, and best practices.
- We currently don’t have any real visual mockup of it, nor “artistic direction” so for the time being, we're copying key features from the current frontend, improving them whenever we can.
Mockups on the current website
- Are you a designer ? Join the design team
Mockups on the current website- Using more openfoodfacts-js
- Using more openfoodfacts-webcomponents
- Support for Open Prices
- Support for Nutri-Patrol
- Feature parity list
The Open Food Facts community uses Slack for communication. You can join the #off-explorer channel on the Open Food Facts Slack.
This project uses pnpm. If you have corepack enabled, you should be able to directly use pnpm commands. Otherwise, you can install pnpm with npm install -g pnpm.
First, set up the environment variables:
cp .env.example .envThen install dependencies:
pnpm installThen start the development server:
pnpm run devTo create a production version:
pnpm run buildYou can preview the production build with pnpm run preview.
The app was initially created by @VaiTon. Since then, many people have contributed to it:
