Websim is an interactive platform for prompting large language models (LLMs) to produce functioning web pages in HTML, CSS, and JavaScript. If you look at the source code on websim pages (via "download website") you can see it for yourself. Websim uses the HTML canvas, which supports full graphics; anything you see on websim with significant code-ish-ness interactivity is highly likely to include JavaScript.

Currently, the Claude 3 family of models by Anthropic are officially supported by websim, as well as GPT-4o by OpenAI. By default, websim is connected to Sonnet, the mid-range Claude 3 model, but if you have access to an API key, you can plug it in to work with any of the supported models. I've been working with Claude 3 Opus, which at the time of writing this tutorial was the most powerful publicly available Anthropic model (on the day that this tutorial was published, Anthropic shipped a new model, Claude 3.5 Sonnet, which is said to be more powerful than Claude 3 Opus). To the best of my recollection, all of my works that are presented in this tutorial were created with Opus.

You can use websim to make basically anything: a homepage for yourself; interactive stories that lean into performance art and visual poetry like Janus's Magic Mirror, Hyperreal Sun: Sol Invictus of Unreality, and Eigengrau Rain; games like this bullshit detector (which was made on user Gregborg's very first try at using websim); simple but clever apps like this magic eye generator by Scratch and this QR code maker by websim co-founder Rob Haisfield (which was made in one shot 5 minutes before his presentation at the recent OpenSouls Cognition Hackathon), and more complex apps like Kat Winter's drawing program for pressure sensitive tablets and this recreation of a Windows 98 desktop by websim developer Vorps. These are just a few of the cool projects that I know of. The sky's the limit.

I've been using websim mainly to make generative art (see: Websim and the practice of generative art). My approach is to build interactive art generators with controls that let me manually change key parameters. They're works of art, but they're also tools to make art within a certain conceptual space that I've defined using the LLM. Spirographs and Etch A Sketches seem to me like a useful analogy; if you're theoretically inclined, you might also find it interesting to think about this process in terms of the pre-computer history of generative art, like Sol LeWitt's wall drawings and John Cage's use of the I Ching to bring aleatory elements into his compositions.

I used websim intensively for a week or two to make generative art, prior to focusing mostly on writing this tutorial for the past few weeks, but even in this short amount of time, I've been blown away by what's possible, and how easy it is to make generative art.

All you have to do is write a prompt in plain language, right in the websim address bar. If you provide a clear description of what you want, Claude (or whichever model you've selected) will generate the necessary code. I think that generative art would be way more popular if it were more accessible, which it has the potential to be now. I also believe that experienced generative artists should be working with LLMs way more as well. I hope that this tutorial will inspire more people to give it a try.

Other people are already starting to explore websim as a medium for making generative art. Check out this simple lava lamp by Brian Sunter; this mathematically inspired piece by Doe Sparkle that incorporates perlin flow and the boids algorithm; this ASCII art harmonograph by Séb Krier; William Lamkin's experiments with turning his generative art into references that he can use in Midjourney, and noveltokens' experiments combining photography with generative art.

To help you learn about my prompting techniques, I've prepared an accompanying website with all of my generative art prompt sequences so far. I’ve also linked to the relevant sections throughout this tutorial.

In addition, for over a year now, I've been researching how various LLMs make ASCII art. This topic is different from what I’m presenting here, although there is some overlap, and I’ll be publishing a blog post about that soon.

There are also a few other websim tutorials floating around, including websim's guide for beginners, Kat Winter's guides for intermediate users and guide for artistic generations, and Cluck0matic's Reddit-based websim URL prompting bible.