How to Use WebSim for Beginners

Welcome to WebSim, the interactive simulation platform that allows you to explore the boundless possibilities of an alternative internet. This beginner's guide will help you get started with structuring your requests and navigating the WebSim experience.

Understanding the Basic Structure

When using WebSim, you will be providing URLs that serve as prompts for the system to generate simulated websites. These URLs can be as simple or as complex as you like, depending on the level of detail you wish to convey.

You can also write in plain language, and WebSim will create a simulated URL and website based on your description. Feel free to combine any amount of real code, fake code, and human language text in your prompts.

The basic structure of a WebSim URL looks like this:

https://websim.ai/path/to/simulated/website

The https://websim.ai/ part is the base URL, and the rest of the path (path/to/simulated/website) represents the simulated website you want to explore.

Adding Parameters

You can enhance your requests by adding parameters to the URL. Parameters allow you to provide additional context or instructions for the system to consider when generating the simulated website.

Parameters are added to the URL as query strings, following the ? symbol. Multiple parameters can be chained together using the & symbol.

For example:

https://websim.ai/path/to/simulated/website?parameter1=value1¶meter2=value2

Here are some common parameters you can use:

Feel free to experiment with different combinations of parameters to see how they influence the generated websites.

Step-by-Step Instructions

Here's a step-by-step guide to get you started with WebSim:

  1. Think of an idea for a simulated website you'd like to explore. You can use a combination of real code, fake code, and plain language to describe your idea.
  2. Construct the base URL using the https://websim.ai/ format, followed by a path that represents your idea (e.g., https://websim.ai/virtual-classroom).
  3. Optionally, add parameters to the URL to provide additional context or instructions (e.g., https://websim.ai/virtual-classroom?theme=futuristic&purpose=education).
  4. Submit your URL or plain language description to WebSim, and the system will generate a simulated website based on your input.
  5. Explore the generated website, following the links and navigating through the simulated content.

Optional additional steps:

  1. If your generation seems incomplete, you can type !continue in the address bar to continue the page.
  2. If desired, add plugins to your simulated website by appending the plugin parameter followed by the unique identifier of the plugin page (e.g., https://websim.ai/virtual-classroom?theme=futuristic&purpose=education&plugin=plugin-id).

Experimental Developer Tools

The following sections describe experimental features and tools intended for developers and advanced users. These features are still in development and may change or evolve over time.

Using WebSim Plugins

WebSim also offers a powerful plugin feature that allows you to enhance your simulated websites by integrating additional functionality or content. A plugin is essentially another simulated website that you can embed within your current WebSim page.

To add a plugin to your WebSim page, you need to use the plugin parameter in the URL. Here's how it works:

  1. Identify the unique identifier of the WebSim page you want to add as a plugin. This identifier is the string that appears after /c/ in the URL of the desired page.
  2. Append the plugin parameter to your current WebSim URL, followed by the unique identifier of the plugin page.

For example, let's say you have a WebSim page with the URL:

https://websim.ai/c/lyIIJIEemsdt7wnJC

To add this page as a plugin to your current WebSim page, you would modify the URL as follows:

https://websim.ai/c/your-current-page-id?plugin=lyIIJIEemsdt7wnJC

You can even add multiple plugins by including the plugin parameter multiple times:

https://websim.ai/c/your-current-page-id?plugin=lyIIJIEemsdt7wnJC&plugin=another-plugin-id

Plugins provide a way of injecting scripts / elements from one WebSim to another.

Please note that specifying plugins in the real URL is a temporary measure just to get people started prototyping. We're still figuring out a more integrated UX for managing plugins.

Experimental WebSim API

All WebSim pages and plugins now have access to the WebSim API through the window.websim.experimental.v0 object. This means that WebSim simulations can now create other WebSim pages programmatically.

For example, check out this pluginified version of @vorps's WebSimTools that actually creates a new WebSim when you hit the save button:

https://websim.ai/c/ZgdNE9KXupxclZ6er?plugin=TYXa3Bip3pLU50HF3

The API documentation is available at:

https://websim.ai/c/JbEI5dS1D1zvNUfT3

Please note that the API is still in its early stages, so any feedback or feature requests are greatly appreciated!