ChatGPT code blocks get interactive previews and split-screen editing

OpenAI has just rolled out more interactive ChatGPT code blocks, bringing inline previews, split-screen review, and full-screen editing to chat. The update also supports debugging snippets and rendering diagrams like Mermaid, aiming to cut down on copy-paste iteration.

openai cover

TL;DR

  • Interactive code blocks: Writing, editing, and previewing code in one place inside chat threads
  • Inline preview: Create and preview diagrams and mini apps directly in chat
  • Split-screen review: Conversation and code artifact visible together for faster iteration
  • Full-screen editing: Make changes in a dedicated expanded view
  • Diagram support: Preview flowcharts and mermaid diagrams via code blocks
  • Snippet debugging: Use code blocks to debug code snippets within the conversation

ChatGPT’s code blocks are getting a meaningful UI upgrade: they’re now “more interactive,” with OpenAI highlighting a workflow that combines writing, editing, and previewing code “all in one place.” The announcement, shared via the OpenAI Developers account, frames the change as an effort to make code inside a chat thread behave more like a lightweight workspace—without needing to bounce between chat output and a separate editor just to see what a snippet does.

What changed: code blocks as a mini workbench

OpenAI’s description centers on three capabilities:

  • Create and preview diagrams and mini apps in chat
  • Review code in split-screen views
  • Make changes in full-screen view

That combination aims at a familiar pain point in AI-assisted coding: the “generate → copy/paste → run → iterate” loop. With inline preview and split-screen review, a chat can keep the conversation and the artifact visible at the same time, which is especially useful when iterating on UI fragments, demos, or small utilities.

A few replies picked up on this shift in emphasis. Some developers welcomed the reduced context switching, while others argued that the bigger bottleneck is agents working directly in a real codebase rather than improving a chat-based sandbox.

Diagrams and debugging inside the thread

In follow-up posts, OpenAI Developers noted that interactive code blocks can also be used to preview flowcharts and mermaid diagrams. Another post points to using code blocks “to debug code snippets,” suggesting that the interactive surface isn’t limited to rendering output—it’s meant to support a more iterative debugging loop within the conversation.

A familiar tension: ChatGPT UI vs. dedicated coding tools

The replies also captured a tension that’s been building across AI coding tools: when does the chat UI become “good enough” to keep work in place, and when does it still fall short of what purpose-built tools (and workflows like Codex) handle well? One commenter asked who the feature is for “when Codex is already so good,” while others focused on the practical upside: fast previews, quick split-screen review, and fewer tab hops during prototyping.

The original post: https://x.com/OpenAIDevs/status/2024600394299822096

Continue the conversation on Slack

Did this article spark your interest? Join our community of experts and enthusiasts to dive deeper, ask questions, and share your ideas.

Join our community