Simon Willison’s Weblog

Subscribe

Saturday, 25th January 2025

OpenAI Canvas gets a huge upgrade. Canvas is the ChatGPT feature where ChatGPT can open up a shared editing environment and collaborate with the user on creating a document or piece of code. Today it got a very significant upgrade, which as far as I can tell was announced exclusively by tweet:

Canvas update: today we’re rolling out a few highly-requested updates to canvas in ChatGPT.

✅ Canvas now works with OpenAI o1—Select o1 from the model picker and use the toolbox icon or the “/canvas” command

✅ Canvas can render HTML & React code

Here's a follow-up tweet with a video demo.

Talk about burying the lede! The ability to render HTML leapfrogs Canvas into being a direct competitor to Claude Artifacts, previously Anthropic's single most valuable exclusive consumer-facing feature.

Also similar to Artifacts: the HTML rendering feature in Canvas is almost entirely undocumented. It appears to be able to import additional libraries from a CDN - but which libraries? There's clearly some kind of optional build step used to compile React JSX to working code, but the details are opaque.

I got an error message, Build failed with 1 error: internal:user-component.js:10:17: ERROR: Expected "}" but found ":" - which I couldn't figure out how to fix, and neither could the Canvas "fix this bug" helper feature.

At the moment I'm finding I hit errors on almost everything I try with it:

In left panel, a prompt: Canvas Build me a timezone tool where I can put in a time in a specific timezone and it shows me that same time in every USA timezone and a few other key timezones around the world - use as few extra libraries as possible. It replies with Here’s a fully functional timezone converter tool built using React. It converts a given time from one timezone to all US timezones and some key global ones. Let me know if you need tweaks or additional features! On the right is a panel showing React code, but below that panel is a console with an error message: Run Error: Build failed with 1 error: internal:user-component.js:6:17: ERROR: No matching export in "external:https://cdn.jsdelivr.net/npm/date-fns-tz/+esm" for import "utcToZonedTime" - there is a visible explanation of that error in a floating window which says: The error indicates that the utcToZonedTime function is not being correctly imported from the date-fns—tz module. This could be due to the way the module is being accessed in the sandboxed environment. It's likely that the import path or version of date-fns-tz doesn't expose the utcToZonedTime function as expected. You might need to check the available exports in the environment or consider using a different method to work with time zones. There is a "Fix bug" button.

This feature has so much potential. I use Artifacts on an almost daily basis to build useful interactive tools on demand to solve small problems for me - but it took quite some work for me to find the edges of that tool and figure out how best to apply it.

# 1:24 am / o1, anthropic, openai, ai, llms, claude-artifacts, ai-assisted-programming, generative-ai, react, javascript

A WebAssembly compiler that fits in a tweet (via) Here's that compiler:

let c=(b,l)=>WebAssembly.instantiate(new Int8Array( [,97,115,109,1,,,,1,5,1,96,,1,127,3,2,1,,7,4,1,,,,10, l=(b=b.split .flatMap(t=>t>-1?[65,t]:107+'-*/'.indexOf(t))) .length+4,1,l-2,,...b,11]))

This article then does a great job of de-obfuscating that code, and uses it to explain a whole bunch of interesting concepts about how WebAssembly actually works.

# 4:52 pm / webassembly, javascript

2025 » January

MTWTFSS
  12345
6789101112
13141516171819
20212223242526
2728293031