171–175 of 175 posts
This is similar to what we tried (and failed) to achieve with Blocks UI[0] at Gatsby. The critical piece almost all current-gen UI editing tools are missing is that there needs to be a sync between changes in the code and changes in the design. John Otander and Chris Biscardi built a complex system based on Babel to manage syncing visual changes to the code. I wonder how Utopia solved this! How do you "move" the visu…
https://github.com/artf/grapesjs
Later however, I discovered craft.js, which is basically a framework for creating systems similar to this (page/component editors). Craft.js was inspired by grapesjs, but is specifically made for react.
https://github.com/prevwong/craft.js
Of course craft.js only solves the UI editor, not the code parsing/generation part. Babel is an obvious choice for code generation/manipulation, but I found its imperative approach unnecessarily complicated, so I built react-ast to enable declarative and composable code generation using react.
https://github.com/clayrisser/react-ast
The part I had not figured out was using the code as the source of truth for the editor and syncing it back. I definitely thought about it a lot, but postponed solving it since I had more pressing problems.
So, I have a lot of curiosity about this project. How does it work? And how does it stack up against a technology like craft.js? I noticed it’s not using craft.js, so I’m guessing the developers rolled their own equivalent.
- Extendable component library and property panel so it can support custom component libraries and styling systems
- Native integration with vscode (maybe as an extension)
- Tailwind style editor and theme ui style editor - Full TypeScript support
Earlier quoted context omitted.
> 25 years later, and we're back to FrontPage. And... about bloody time IMHO. There's a reason tools like FrontPage and Flash were so popular - those tools made the internet available to millions of people who aren't into tedious coding.
Utopia founder here. Yep, I loved the idea of Frontpage, and learnt so much, and yet - it sucked so much in practice. What kept us honest here was having the real-time feedback loop between design and code, and real-time two way editing. It really pushed us to "only make the smallest, surgical updates possible", and ultimately "make sure the editor actually understands the code" We also are trying our best to preserv…
Do you think there'll be a "standalone" version of the live-preview / UI, without being tied to VSCode and allowing a separate code-editor?
The page is completely broken for me with most links failing due to certificate errors: Failed to load resource: net::ERR_CERT_INVALID 4b99d2cfb81c64aed531.css:1 Failed to load resource: net::ERR_CERT_INVALID cdn.utopia.app/_next/static/chunks/webpack-50bee04d1dc61f8adf5b.js:1 etc Same in Chrome and Safari
Is this still the case for you? I don't believe we've seen this issue from anyone else, so I'm wondering if it was a blip or something more insidious