concrete-utopia/utopia

Utopia is a design and development environment for React applications that bridges the gap between visual design tools and code. Instead of treating design files and source code as separate things that need to be kept in sync, Utopia uses the actual React code as the single source of truth and lets you make changes either by editing the code or by clicking and dragging in a visual canvas. Changes made in one view immediately reflect in the other. The intended audience is people building React-based web products who want the flexibility to work visually without abandoning real code. You can try it directly in the browser at utopia.app without installing anything. The hosted version is the recommended way to use it, setting up the project locally is only necessary if you want to contribute to developing Utopia itself, and the README notes that the local version is slower and still requires a connection to the project's servers. For contributors, the setup process involves Nix, a package manager used to create a reproducible build environment. The README walks through the steps: installing Nix, generating a GitHub token (needed because building the integrated VS Code component pulls dependencies through the GitHub API), running a full build the first time, and then using a faster incremental start command on subsequent runs. The development environment runs multiple services in parallel managed by tmux, a terminal tool for splitting a single terminal window into multiple panes. The project is written in TypeScript and is described as early software, though functional. It is open source and has had contributions from thirteen people listed in the repository.