QuikChat

See it in action md-full ~14 KB

QuikChat is a zero-dependency chat widget. The base build handles messages, themes, streaming, history, and more in ~5 KB. Add the quikchat-md-full build (still one <script> tag, still zero npm dependencies) and each message is rendered through quikdown — adding tables, code highlighting, math, interactive maps, Mermaid diagrams, and inline SVG. For just basic markdown use the lighter quikchat-md build (~9 KB). For a pure chat widget with no markdown, see Getting Started.

Scroll through the conversation below to see what the full build can do. See also: examples for history save/restore, tool-call visibility, virtual scrolling, RTL, and more.

<link rel="stylesheet" href="https://unpkg.com/quikchat/dist/quikchat.css">
<script src="https://unpkg.com/quikchat/dist/quikchat-md-full.umd.min.js"></script>

<div id="chat" style="height: 480px;"></div>

<script>
const chat = new quikchat("#chat",
  (chat, msg) => {
    chat.messageAddNew(msg, "you", "right", "user");
    // send msg to your LLM, stream the response back:
    // chat.messageAppendContent(id, token);
  },
  { theme: "quikchat-theme-light",
    titleArea: { title: "My Chat", show: true } }
);
</script>

Features

• Zero runtime dependencies — under 5 KB gzipped (base), ~9 KB with markdown, ~14 KB full
• 11 built-in CSS themes — light, dark, glass, gradient, minimal, and more
• Markdown rendering — bold, italic, code blocks, tables, syntax highlighting, math, diagrams
• XSS-safe — built-in HTML sanitization or plug in your own (e.g. DOMPurify)
• Streaming — token-by-token display with typing indicator for LLM responses
• History save / restore — export and import full chat sessions as JSON
• Dynamic resize — fills parent container and adapts automatically
• LLM-ready — historyGet() returns OpenAI-compatible { role, content } objects
• Multi-user — multiple users per chat, multiple independent chats per page
• Message visibility and tagging — hide system prompts and tool-call results from UI
• RTL / LTR text direction support
• Callbacks for send, add, append, replace, and delete events
• Per-message timestamps (show/hide)
• UMD, ESM, and CJS builds — works with CDN, npm, or local files

Why QuikChat?

QuikChat sits between "build it from scratch" and "install a full chat SDK." Here's how it compares:

Theming

Themes are CSS classes applied to the widget root. Switch themes at runtime:

chat.changeTheme("quikchat-theme-dark");

Eleven themes are included: light, blue, warm, dark, midnight, ocean, modern, glass, gradient, minimal, and debug (all prefixed quikchat-theme-). To create a custom theme, see the Theming Guide.

API Reference

Constructor

new quikchat(parentElement, onSend, options)

Messages

Visibility & Tags

History

UI Controls

Content Processing

Callbacks

Static

Examples

• Basic Usage (UMD) — script tag, theme switching, toggle controls
• Basic Usage (ESM) — ES module import
• Dual Chatrooms — two widgets talking to each other
• Ollama (simple) — local LLM chat
• Ollama with Memory — conversational context via historyGet()
• LM Studio with Memory — local LLM via LM Studio
• OpenAI — GPT-4o with streaming
• Markdown (basic) — quikchat-md: bold, italic, code, tables (~9 KB gzip)
• Markdown (full) — quikchat-md-full: + syntax highlighting, math, maps, SVG (~14 KB gzip)
• React Integration — using quikchat inside React