-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
-
For some reason, I never liked that all the code playgrounds have seperate windows for HTML, CSS and Javascript.
So I made this one, where you edit just a raw html page and see the output right away:
https://github.com/no-gravity/html_editor
I do found more minor errors in MDN compared to other official documentation (like Python), but it's kinda understandable.
And it sometimes takes months to get things fixed (after reporting or providing PR at https://github.com/mdn/content).
https://www.w3fools.com/:
> When W3Fools was launched in 2011, the state of documentation for developers was poor. This site documented many content errors and issues with the W3Schools website. The Mozilla Developer Network was around but it did not have much support at the time.
> Today, W3Schools has largely resolved these issues and addressed the majority of the undersigned developers' concerns. For many beginners, W3Schools has structured tutorials and playgrounds that offer a decent learning experience. Do keep in mind: a more complete education will certainly include MDN and other reputable resources.
Not trying to start a flame war but what can you do with these that can't be accomplished with React and e.g. https://styled-components.com ?
If you ever want to add a client-side-only playground to your own site, have a look at the Playground Elements project: https://github.com/google/playground-elements
It's a set of custom elements and a service worker that populate an iframe with the contents of the code editor with no server, but in a way that looks like real network requests to the iframe.
This means you get a root HTML page and all the right loading behavior and ordering as a real hosted web page. Inspect the iframe with devtools and you see exactly what you wrote, nothing added by the playground.
The elements also support Node-style import specifier resolution, pulling npm dependencies automatically from unpkg.com, TypeScript, and JSX.
And the elements are very configurable. You have drop in a tabbed-editor and preview combo element, or you can separate the preview and editors for each file - which lets you write prose around each.