Web Workshop 🚧

Craft handmade websites in their natural habitat (your web browser).



Web Workshop was born as a teaching tool for web development classes, with the goal of making web publishing more accessible, especially to those who have never written code before.

By stripping away complexity and focusing on the basics, Web Workshop turns website building into something playful and toylike – a creative playground where you can experiment, break things, and watch your ideas materialize in real-time.



Recently, Web Workshop has become an editor of choice for HTML Day, an annual celebration of handmade websites and the creative web.

Built with Web Workshop

How to Play

  1. Open index.html in your web browser (click here!)
  2. Type some HTML in the editor pane
    • The preview pane will rerender when you're done typing
    • Your work is automatically saved, and restored when you reload the page
  3. Press ⌘ + S to export your work as an HTML file (⌘ + O to open an existing file)

Boilerplate

Type <!> to insert the following starter HTML:

<!DOCTYPE html>
<html>
    <head>
        <style>

        </style>
    </head>
    <body>

    </body>
</html>

Stock Images

A library of stock images is included for your convenience. To browse them, type <img src="?"> anywhere in the editor pane, then click to select an image from the resulting table.



Alternatively, if you know the name of the image you'd like to use, you can add it to your project like so: <img src="coffee.gif">.

Built-in Fonts

A collection of free fonts is also included. In your CSS (style tag or inline styling), type font-family: to preview what's available. Use ↑ / ↓ to navigate the list, and press Enter to select the highlighted font.

<style>
    h1 { font-family: 'Basteleur Bold'; }
</style>
available font families...
font-family variants license
Baskervville Regular, Italic, Bold, Bold Italic SIL Open Font License
Baskervville SemiBold Regular, Italic SIL Open Font License
Basteleur Bold Regular SIL Open Font License
Basteleur Moonlight Regular SIL Open Font License
Avara Bold, Bold Italic SIL Open Font License
Avara Black Regular SIL Open Font License
Ballet Regular SIL Open Font License
Bitcount Single Regular SIL Open Font License
Cut Me Out 2 Regular SIL Open Font License
Elb-Tunnel Regular Creative Commons
Elb-Tunnel Schatten Regular Creative Commons
Eagle Lake Regular SIL Open Font License
Eureka Regular SIL Open Font License
Feroniapi Medium Italic SIL Open Font License
Geostar Fill Regular SIL Open Font License
Hyper Scrypt Regular SIL Open Font License
IBM Plex Serif Regular, Italic, Bold, Bold Italic SIL Open Font License
Indira K Regular SIL Open Font License
Instrument Serif Regular, Italic SIL Open Font License
Jacquard 12 Regular SIL Open Font License
Jacquarda Bastarda 9 Regular SIL Open Font License
Jgs Font Regular SIL Open Font License
Jgs 5 Regular SIL Open Font License
Jgs 7 Regular SIL Open Font License
Jgs 9 Regular SIL Open Font License
Kaeru Kaeru Regular SIL Open Font License
Kanalisirung Regular SIL Open Font License
Karrik Regular, Italic SIL Open Font License
Kings Regular SIL Open Font License
Matemasie Regular SIL Open Font License
Mess Light SIL Open Font License
Mon Hugo Regular SIL Open Font License
Mon Hugo Out Regular SIL Open Font License
Murrx Regular SIL Open Font License
Neo-castel Regular OIFL (French OFL)
Ouest Regular OIFL (French OFL)
Princess Sofia Regular SIL Open Font License
Resistance Regular SIL Open Font License
Snowburst One Regular SIL Open Font License
Special Elite Regular Apache License
Special Gothic Expanded One Regular SIL Open Font License
Steps Mono Regular SIL Open Font License
Steps Mono Thin Regular SIL Open Font License
Terminal Grotesque Regular SIL Open Font License
Terminal Grotesque Open Regular SIL Open Font License
Tiny5 Regular SIL Open Font License
Trickster Regular SIL Open Font License

Options

Installation for Offline Use

Wanna make websites on your phone? Try installing Web Workshop as a Progressive Web App!

(You can install it as a desktop app, too...)

Technologies Used

License

GPLv3 (see LICENSE for details).


Contributing

Feel free to open issues or submit pull requests for improvements!