diff --git a/renderer/index.ts b/renderer/index.ts
new file mode 100644
index 0000000..142e2c4
--- /dev/null
+++ b/renderer/index.ts
@@ -0,0 +1,2 @@
+export type { ImageRenderer, RenderFrame, RendererBackend } from "./renderer";
+export { createRenderer } from "./renderer";
diff --git a/renderer/renderer.ts b/renderer/renderer.ts
new file mode 100644
index 0000000..fae79b9
--- /dev/null
+++ b/renderer/renderer.ts
@@ -0,0 +1,40 @@
+import type { ImageDocument } from "@core/document";
+import type { EditorState } from "@editor/state";
+
+export type RenderFrame = {
+  document: ImageDocument;
+  editor: EditorState;
+};
+
+export type ImageRenderer = {
+  render(frame: RenderFrame): void;
+  resize(width: number, height: number): void;
+  dispose(): void;
+};
+
+export type RendererBackend = "webgl";
+
+export function createRenderer(canvas: HTMLCanvasElement, backend: RendererBackend = "webgl"): ImageRenderer {
+  if (backend !== "webgl") {
+    throw new Error(`Unsupported renderer backend: ${backend}`);
+  }
+
+  const context = canvas.getContext("webgl2");
+  if (!context) {
+    throw new Error("WebGL2 is not available");
+  }
+
+  return {
+    render() {
+      context.viewport(0, 0, canvas.width, canvas.height);
+      context.clearColor(0, 0, 0, 0);
+      context.clear(context.COLOR_BUFFER_BIT);
+    },
+    resize(width, height) {
+      canvas.width = width;
+      canvas.height = height;
+      context.viewport(0, 0, width, height);
+    },
+    dispose() {},
+  };
+}