Embed API

The Embed API allows you to integrate the graphics.h Turbo C runtime into any website using a standard iframe.
Supports snippet execution, full program execution, URL-based autorun, and JavaScript SDK integration.

No installation required
No package dependencies
Runs entirely in the browser

Quick Start

Include SDK script
Create container element
Initialize and run

html

<!-- 1. Include SDK -->
<script src="https://graphics-h-compiler.vercel.app/sdk.js"></script>

<!-- 2. Create container -->
<div id="gh-container" style="width: 480px; height: 360px"></div>

<!-- 3. Initialize and run -->
<script>
  // Use scale: 0.75 for tight doc spaces, or scale: 1.0 for large academic layouts.
  const gh = new GraphicsHEmbed("#gh-container", { scale: 0.75 });
  gh.runSnippet("setcolor(YELLOW); circle(320, 240, 100);");
</script>

Interactive Demo

Test the JS SDK directly from this page. Edit the code below and run it to see the output.

Live Editor

setcolor(YELLOW);
circle(320, 240, 100);
setfillstyle(SOLID_FILL, RED);
floodfill(320, 240, YELLOW);

SDK Reference

Detailed documentation for the GraphicsHEmbed class.

Constructor

Parameter	Type	Description
`selector`	`string`	CSS selector for the container element (e.g. `"#id"` or `".class"`)
`options`	`object`	Optional. Configure `baseUrl`, `scale`, or `theme`.

Methods

Method	Arguments	Description
`runSnippet`	`code, boilerplate`	Compiles and runs graphics code. `boilerplate` defaults to `true`.
`setScale`	`scale`	Dynamically resizes the visual DOS output. (e.g. `0.8` or `1.5`).

Layout Customization

Modern responsive design ensures the embed scales perfectly to fit any container.

css

/* Responsive Example */
.embed-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 3;
}

.embed-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}