They also use outdated snapshots of frameworks/sites.
Challenges
In the current setup a script and style tag have to be added for each demo, which can be avoided and would make managing demo pages much easier.
History is not scoped per page or folder, and has to be reset manually every time you go to another page.
Types of CSS
While the goal is to support CSS in general, some types are particularly interesting. Either because they're commonly used, or work very well with the editor, or work very poorly with it.
Semantic class names in complex application (like the halfmoon demo): This is the most interesting type and has the best result in the editor
Tailwind-esque: Super common these days. Unfortunately still has open challenges in the editor that ruin the experience. Tailwind's variables also don't make a lot of sense (--tw-opacity: 1 is added to almost every color... as though the 1% of people that want to change opacity on 1% of the colors of their site in this way need to have this variable in place in advance and are completely unable to add it only when they need it... everybody else's experience in devtools is not as important apparently)
Very clean CSS (good editor result)
Very messy CSS (provides many edge cases and a free performance test)
The current selection of online demo pages has been around for some time and could be expanded to cover more different types of CSS.
They also use outdated snapshots of frameworks/sites.
Challenges
Types of CSS
While the goal is to support CSS in general, some types are particularly interesting. Either because they're commonly used, or work very well with the editor, or work very poorly with it.
--tw-opacity: 1is added to almost every color... as though the 1% of people that want to change opacity on 1% of the colors of their site in this way need to have this variable in place in advance and are completely unable to add it only when they need it... everybody else's experience in devtools is not as important apparently)