I tried locally, and most of the issues encountered:
In fullscreen, sometimes the escape bar overlaps the content, making it impossible to interact with it.
Sometimes, “Run Artifacts” doesn’t appear immediately, but it does once you hover over the post icons for example (it seems)
I had only one instance when no result was displayed. I could see the indicator, and then nothing happened.
Overall, it works very well.
Here are some of the demos.
It’s not that easy to get a demo right. As usual, the more detailed a prompt, the better.
Sometimes, extra precision is needed. It doesn’t always include all resources, is not responsive, or requires code to wait for page load. Also, using external libraries raises the chance of failure.
I enjoyed way too much this feature.
Prompt (simulate projectile motion)
Create a page to simulate projectile motion. The page should:
Allow users to input initial velocity, angle, and height of the projectile.
Display a live animation of the projectile’s trajectory.
Include calculated values for time of flight, maximum height, and range.
Use sliders for real-time adjustment of input parameters.
Include a “Reset” button to start over.
Video
Prompt (Emoji raining game)
Create a page where users pick their mood, and emojis start raining down the screen. The page should:
Provide mood options like “Happy,” “Grumpy,” or “Pizza.”
Make emojis like , , or fall endlessly from the top of the screen.
Allow users to click emojis to “collect” them with a funny sound effect.
Include a silly counter like “Pizza Slices Collected: 27.”
Use HTML, CSS, and JavaScript for animated fun.
Video
Prompt (Simple solar system visualizer)
Create a page visualize the solar system. The page should:
Display a scaled-down, animated, detailed solar system showing planetary orbits.
Allow users to click on a planet to view information such as size, distance from the sun, and orbital period.
Allow users to zoom in and out.
Include a slider to speed up or slow down orbital motion.
Use HTML, CSS, and JavaScript for interactivity and animation.
Make sure the container uses 100% width and height
Video
Prompt (CSS Animation playground)
Create a page where users can experiment with CSS animations and transitions. The page should:
Display various elements (e.g., buttons, divs) that users can animate with CSS.
Allow users to choose from a list of animation properties (e.g., transform, opacity, translate, rotate).
Provide sliders to adjust the duration, timing function, and delay of animations.
Let users preview the animations in real-time and see how changes affect the animation.
Use JavaScript to update CSS properties dynamically and HTML/CSS for styling.
Video
Prompt (Interactive Data Dashboard)
Create a page that visualizes a data dashboard with interactive charts. The page should:
Display multiple charts, such as a bar chart, line graph, and pie chart, each representing different datasets (e.g., sales, population, weather data).
Allow users to filter the data by time range, category, or location using dropdown menus or sliders.
Update the charts in real-time as users interact with the filters.
Show descriptive statistics (e.g., mean, median, mode) for the selected data.
Use Chart.js or D3.js for rendering charts and JavaScript to handle data filtering and statistical calculations.
Would it work with globally shared (trust level 0) data explorer queries accessed via API? If yes, then it has some potential to generate some fun, dynamic visuals of forum activity.
I didn’t have the time to test it myself, but maybe someone feels like giving it a try for this use case
You could wire it up with a custom tool, it would be a fair bit of juggling I would probably just make the custom tool render the chart somehow though for that use case, we can have a play with this idea
You can though share visualisations for sure, will show you
Yes, this is true not just for AI Web Artifacts but in using an LLM to create HTML, JavaScript and CSS.
If one can keep the development as plain/vanilla HTML, JavaScript and CSS, meaning that it does not include any external libraries the chances of getting working and bug free code goes up dramatically. Also the more obscure the library, will mean that the model was given less training data, the more likely the model is to hallucinate to complete the reply, thus more bugs.
However, it’s odd today. I tested again; every request failed.
The OpenAI status is green. Nothing changed while I was sleeping, so I’m not sure what’s happening.
The “Run Test” button also gives me a 500 error, and the logs show a timeout.
On a side note, from a user perspective, I wonder if it would be welcome to have an error message (versus a blank one) and a way to retry.
A a regular on the OpenAI forum we see much of the ups and downs of the models. For the past two weeks the reports of problems have increased but these problems are reminiscent of such problems before a major release or new models.
Very basic question… how do I share an artifact in my forum? Just copy&paste something like <div class="ai-artifact" data-ai-artifact-id="XX"></div>? In that case I’m the only one who can see and use it.
In my limited experience, using Claude 3.5 Sonnet, I iterate back and forth with the Web Creator and make some progress, but eventually it starts forgetting and I have to start over in a new session. I feel like it would be easier to touch up the code manually than to waste prompts and risk forgetting.
Can I edit the generated code?
Can I start a new context with an existing artifact? (I asked the Web Creator and it said no.)
Yeah Mark this is a tough one, I am working on a redo of the artifact internals:
Unstable edits have also annoyed me to no end. Still deciding how many knobs to provide.
I moved the system to an aider like Architect approach, the tool calls an LLM to perform the updates so it is able to do so far more reliably and there is no drift problem anymore. The downside though is that the new system can use more tokens cause there is a level of unavoidable duplication.
I may allow you to start with an existing artifact (have it clone it) if the artifact was shared publicly… will have a think about how we can swing this, need to be extra careful about security.
Normally when I iterate with the Web Creator, it says something like “I will update the artifact with the new feature” then writes blocks of html, css, and javascript, then shows the updated artifact so I can Run Artifact.
Today it consistently says “I will update the artifact” and writes the blocks of code, but then deletes the code and artifact (if it even created it). So I’m left with just “I will update the artifact”. Even if I edit the creator’s post, that’s all there is.
I haven’t updated or changed anything. No errors in console. Claude 3.5 Sonnet.
, or 
fall endlessly from the top of the screen.
