WebSim UI Guide

Understanding the Navigation Bar

Maximize - Third circle from the left, green in light mode/pink in dark mode. This will enlarge the WebSim page and hide the navigation bar. To get out of this mode, mouse to the top of the screen and click the same button again.

Back - This will take the user back one previous page in context.

Refresh - Regenerates the page with the same prompt used again. Helpful for seeing possible variations in outputs from the same input.

Home - Resets context, takes user back to the WebSim homepage.

Profile Icon - Contains settings, and takes user to their current profile page. Set a profile page by changing the link section of a bookmark to 'profile'.

Prompt Menu - Tell WebSim what it should create, or what changes to make on an existing page.

Random - Takes you to a random public WebSim page.

Like/Bookmark
Like - For saving another user's creations to access later.
Bookmark - For saving your own creations to access later, or publish publicly.

Three dots - For downloading your WebSim's HTML code.

Understanding the Prompt Menu

Clicking in the Prompt bar opens up a larger menu.

Prompting - Within the main text field, users are able to input any prompt to edit an existing WebSim, or to create a new one from the homepage. Learn more about prompting in WebSim.

Model - Defaulting to Sonnet 3.5, this drop down menu allows users to choose which LLM they would like to interact with.

Context - This menu shows what pages are being retained in your current WebSim's context.

Image Prompting - Allows users to prompt with an image to be read through their vision-enabled LLM. The LLM 'looks' at the image, and can use it as a reference while creating something. This is not to upload an image to a WebSim - to do that, use a publicly accessible link to an image online.

Understanding the Sidebar

On desktop, the sidebar is accessed by moving the mouse to the left edge of the screen. On mobile, there is an icon resembling 3 horizontal lines.

Lock Open - Prevents the sidebar from closing (Computer only)

Bookmarks - A list of the user's own creations they have saved, with ability to access an edit button⁵ in the top right of each bookmark. Editing a bookmark in this menu allows users to change the title⁶ of their WebSim, set the link to published⁷, change the link⁸, delete the bookmark⁹, and update a bookmark's link to the current page¹⁰.

Likes - Liked pages are accessible here, as well as on the homepage in the 'Liked' tab.

History - Recent and longer-term page viewing history is available here, with a search function.