All three major AI chatbots can show a live preview of your HTML next to the chat. Use it to iterate quickly before you copy code into Teacher Hive.
Claude (Anthropic)
- Claude shows previews in Artifacts. When your prompt asks for HTML, Claude opens a side panel with a working preview.
- The preview updates as you ask for changes.
- Use the copy button at the top of the Artifact to grab the full HTML.
ChatGPT (OpenAI)
- ChatGPT shows previews in Canvas. Ask for "an HTML page" and Canvas opens automatically.
- You can edit inside Canvas, or ask in chat and Canvas updates.
- Use the menu at the top of the Canvas to copy the code.
Gemini (Google)
- Gemini shows previews in Canvas, accessible from the Tools menu under the prompt box.
- Toggle between code view and preview view at the top of Canvas.
- Copy the code from the code view.
Canva Code
- Canva shows a preview next to the chat that opens automatically.
- While you can copy the HTML code and add it to Teacher Hive, the app might not render correctly.
- Canva makes it easy to publish as a webpage. Copy the link to that webpage and add it to Teacher Hive as an external app.
A note about previews. When your app uses a Superpower, the preview in your AI chatbot (Claude's Canvas, ChatGPT's Canvas, Gemini's Canvas) won't show the Superpower working. The Superpower only connects when the app is hosted on Teacher Hive. Paste the code into the Add App modal and test it on Teacher Hive.
What to do
Iterate as long as you like in the Canvas. When the app behaves the way you want (minus any Superpower features), copy the full HTML and paste into the Add App modal on Teacher Hive. Then test the Superpower parts on the live page.
