Just want to try it? Go to Demoboard »
Once upon a time, when I was a young lad, the web was simpler. Code was
<script> tag to your HTML and… starting writing.
package.json to manage, and
node_modules wouldn’t have fit on a 512mb hard drive anyway.
import to pull in React and Material UI. There’s no
package.json — imports just work. And there’s nothing special about the React or Material UI packages to make this so. You can use any package. For example, if you don’t like React, you can use Vue instead:
By the way, say you’ve made some changes to one of these editors, and you want to save or share them? Hit the fork button, and you’ll have your very own Demoboard. Just copy and paste the new page’s URL to share it — and login with GitHub to make sure you can save new changes down the track.
#But how does all this magic work?
Simple. The editor transpiles your code with Babel, uses a babel plugin to find any resulting
require() statements, and then uses this info to build a special browser-loadable module for each file.
But what about bare imports like
@material-ui/core/Button? Demoboard downloads each file from UNPKG on the fly, then applies the same CommonJS special-sauce transform on UNPKG modules. Thanks to UNPKG’s ability to put version ranges in URLs, you can even request specific versions of NPM packages, like this React Hooks example that imports
#An editor for learning.
Of course, an editor will only get you so far. Students need guidance. Frontend Armory has some great Demoboard based courses and guides, but there’s always more ground to cover. And that’s where you come in.
Demoboard is designed to let you create demos and lessons for your favorite topic, using MDX.
You know how GitHub displays the
README.md file when you load a project? So does Demoboard. Here’s the README for Demoboard itself:
Under the hood, Demoboard uses MDX to turn markdown into JSX. This means that you can write in Markdown like you’re used to, but you can still import any React component on NPM. There’s also a button at the top-right to toggle between
/, letting you jump quickly between a demo and it’s docs.
#What will you demo?
My favorite thing about Demoboard is the “fork” button. With a single button press, you have a new URL all to yourself. Just start typing, then show the world… and show me too, because I can’t wait to see what you make.
To give you some idea of the possibilities, I’ll be sharing some demos that the community have put together here.
First up is a HTML/SASS only Demoboard by Nathan Taylor — who is also behind the design of Frontend Armory itself.
#How you can help
My mission with Frontend Armory is to create the most effective way to learn frontend engineering on the internet. That’s a big goal, and I can’t do it alone. Here’s how you can help:
- If you’ve created a demo, then show it off with the #demoboard hash tag! I’ll be blogging about what people create.
- Share this post using the buttons on the left.
- If there’s anything you love or hate, let me know at firstname.lastname@example.org — your honest feedback is invaluable.
- If you just want to support the project but don’t need the courses, then join Frontend Armory Pro anyway!
- And if you haven’t already, create a free account to stay in the loop with new demos, tools and courses.
Finally, I want to thank you for reading. Putting Demoboard together has been an adventure, and I’m super grateful that you’re showing an interest. I’ll be back in touch soon with some examples of what people have created — stay tuned!