Illustrations & Interactive Visuals

Overview

When explaining complex systems, geometries, workflows, or scientific concepts, words and static screenshots often fall short. Evelant can generate and run live, interactive visual illustrations right inside your conversation.

Whether you need a 3D orbital model you can rotate with your mouse, an Excalidraw-style hand-drawn architecture sketch, an interactive compound interest calculator with live sliders, or an animated diagram of the water cycle, Evelant creates self-contained interactive visual widgets on demand.

Why live illustrations instead of static images or text

1. Direct exploration: Instead of guessing what a 3D model looks like from another angle, click and drag to orbit around it.
2. Dynamic manipulation: Adjust parameters with sliders or buttons to see immediate cause-and-effect in simulations and financial models.
3. Adaptive themes: Illustrations inherit Evelant's light or dark mode palette automatically, keeping lines and text crisp and readable without glare or contrast loss.

Supported capabilities

Evelant comes pre-loaded with several industry-standard visualization engines, running securely with zero network latency:

• 3D graphics (THREE): Powered by Three.js with built-in camera orbit controls. Ideal for geometric models, mechanical overviews, physical systems, and space simulations.
• Hand-drawn diagrams (rough): Powered by Rough.js—the rendering engine behind Excalidraw. Ideal for sketchy software architecture diagrams, flowcharts, user journey maps, and wireframe mockups with a natural hand-drawn feel.
• Charts & metrics (Chart): Powered by Chart.js 4. Interactive bar charts, multi-series lines, radar charts, and scatter plots with hover tooltips and interactive legends.
• Data visualization (d3): Powered by D3.js v7. Custom hierarchical trees, chord diagrams, force-directed network graphs, and custom mathematical projections.
• Interactive scientific graphing (Plotly): 2D statistical, financial, and scientific plots with zoom, pan, and hover inspection.
• SVG & Canvas 2D animations: Smooth vector diagrams, fluid physics, wave mechanics, and state machines rendered using standard Web APIs.

How to use it

Ask in natural language for the visual representation or interactive tool you want:

• "Make a 3D rotating cube with per-face colors that I can drag to rotate."
• "Draw an Excalidraw-style architecture diagram showing our API gateway, auth service, and database."
• "Build a compound interest calculator with sliders for principal, interest rate, and years, with a live stacked bar chart."
• "Animate a simple solar system with planets orbiting the sun and hover tooltips for each planet."
• "Show a monthly sales comparison between two products over 12 months with interactive tooltips."

Evelant detects when an interactive visual provides a better explanation than prose and outputs a dedicated illustration widget.

What you see

An illustration appears in the conversation as just the visual, with no toolbar, code view or download around it. Interact with it directly: drag a 3D scene to orbit it, press the buttons in a simulation, hover a chart.

Illustrations start when they scroll into view, so a long conversation with many 3D scenes stays light. In a shared room they wait for a click instead (see below).

A chat can hold as many illustrations as you like. At most six run at the same time. When more start, the ones you have scrolled far away from are paused and show a short "Paused while off screen" note, and they start over on their own when you scroll back to them. This keeps the tab fast and stops the browser from blanking older 3D scenes. A paused illustration loses its state (a slider you moved, an angle you rotated to), and in a shared room it goes back behind its Run button.

In the browser extension

Illustrations work the same way in all three chat surfaces of the Evelant extension: the floating chatbox, the in-page side panel, and the browser's side panel. The picture, the libraries, the light and dark themes and the click-to-run rule in shared rooms are identical to the web app.

A few things differ because the extension runs on pages you don't control:

• The frame is part of the extension. It is a page packaged inside the extension and declared as a Chrome sandbox page, so the website you are on can neither read it nor loosen its rules, and its own security policy doesn't apply to it.
• Nothing runs while the chatbox is closed. Illustrations start only when the chat is open and the picture is on screen.
• A picture that tries to open another page is stopped. It is replaced by a short notice instead of showing that page inside your chat.
• You need a current extension build. Older installs don't tell Evelant they can draw illustrations, so they are never sent an illustration and keep getting normal answers.

The Python sandbox Preview button on .html result cards works in the extension as well: the file card in the chat has it (see Code Sandbox).

Security & Privacy: The Zero-Network Sandbox

Running AI-generated JavaScript in a web application requires uncompromising security. Evelant isolates every illustration inside a dedicated sandboxed iframe (/illustration-frame on the web, a packaged sandbox page in the extension) governed by a strict Content Security Policy (CSP):

• Zero network access (connect-src 'none'): The frame cannot make API calls, fetch external URLs, open WebSockets, or send tracking beacons.
• No data exfiltration: The frame runs in an opaque origin (sandbox="allow-scripts" without allow-same-origin). It has no access to cookies, local storage, session tokens, or the parent application DOM.
• Pre-bundled assets: All supported libraries are bundled locally and served from Evelant's own origin; external CDN scripts are refused and stripped.
• Click-to-run in Shared Rooms: When collaborating in shared multiplayer rooms, every illustration, including your own, waits for a manual click to run, because a participant's prompt can shape what the assistant writes on your screen. Python-generated pages in a file card wait for a click as well.

Python Sandbox Integration

When writing Python code in the Code Sandbox, scripts that generate interactive HTML files (such as Plotly via fig.write_html("chart.html", include_plotlyjs=False)) automatically render an interactive Preview button inside the sandbox result card, letting you explore interactive data visualizations without leaving the chat.