or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

base-component.mdexample-component.mdindex.mdmain-component.md
tile.json

tessl/npm-gradio--markdown

Svelte-based Markdown rendering component with LaTeX support, HTML sanitization, and code highlighting for Gradio UI applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@gradio/markdown@0.13.x

To install, run

npx @tessl/cli install tessl/npm-gradio--markdown@0.13.0

index.mddocs/

@gradio/markdown

@gradio/markdown is a comprehensive Svelte-based component library for rendering Markdown content with advanced features including LaTeX mathematical expression support, HTML sanitization, code syntax highlighting, and seamless integration with the Gradio UI framework. It provides three specialized components optimized for different use cases within machine learning and data science web applications.

Package Information

  • Package Name: @gradio/markdown
  • Package Type: npm
  • Language: TypeScript/Svelte
  • Installation: npm install @gradio/markdown

Core Imports

import { BaseMarkdown, BaseExample } from "@gradio/markdown";

For the main Gradio-integrated component:

import Markdown from "@gradio/markdown";

Alternative example component import:

import Example from "@gradio/markdown/example";

Basic Usage

import { BaseMarkdown } from "@gradio/markdown";

// Basic markdown rendering
<BaseMarkdown 
  value="# Hello **World**\n\nThis is a paragraph with `code`." 
  latex_delimiters={[]} 
  sanitize_html={true}
  line_breaks={false}
  rtl={false}
  visible={true}
  elem_classes={[]}
/>

// With LaTeX support
<BaseMarkdown 
  value="The solution to $x^2 + 1 = 0$ is $x = ±i$" 
  latex_delimiters={[{left: "$", right: "$", display: false}]} 
  sanitize_html={true}
/>

Architecture

@gradio/markdown is built around three core components:

  • Main Component (Index.svelte): Full-featured Gradio-integrated wrapper with status tracking, event handling, and complete UI framework integration
  • Base Component (BaseMarkdown): Core rendering engine providing all markdown functionality without Gradio-specific features
  • Example Component (BaseExample): Lightweight preview component with text truncation for gallery and table displays
  • Rendering Engine: Integration with @gradio/markdown-code for syntax highlighting and mathematical expression support
  • Event System: Copy functionality with clipboard integration and change event dispatching

Capabilities

Main Markdown Component

Full-featured Gradio-integrated markdown component with status tracking, event handling, and complete UI framework integration. Ideal for primary content display in Gradio applications.

// Default export from Index.svelte - Main Gradio-integrated component
export default class MarkdownComponent extends SvelteComponent<{
  elem_id?: string;
  elem_classes?: string[];
  visible?: boolean;
  value?: string;
  loading_status: LoadingStatus;
  rtl?: boolean;
  sanitize_html?: boolean;
  line_breaks?: boolean;
  gradio: Gradio<{
    change: never;
    copy: CopyData;
    clear_status: LoadingStatus;
  }>;
  latex_delimiters: LatexDelimiter[];
  header_links?: boolean;
  height?: number | string | undefined;
  min_height?: number | string | undefined;
  max_height?: number | string | undefined;
  show_copy_button?: boolean;
  container?: boolean;
  theme_mode: ThemeMode;
  padding?: boolean;
}>;

// Re-exported base components from Index.svelte
export { default as BaseMarkdown } from "./shared/Markdown.svelte";
export { default as BaseExample } from "./Example.svelte";

Main Component

Base Markdown Component

Core markdown rendering component without Gradio wrapper, providing all essential markdown functionality with LaTeX support, HTML sanitization, and copy features.

export { default as BaseMarkdown } from "./shared/Markdown.svelte";

// BaseMarkdown component interface
export default class BaseMarkdownComponent extends SvelteComponent<{
  elem_classes?: string[];
  visible?: boolean;
  value: string;
  min_height?: number | string | undefined;
  rtl?: boolean;
  sanitize_html?: boolean;
  line_breaks?: boolean;
  latex_delimiters: LatexDelimiter[];
  header_links?: boolean;
  height?: number | string | undefined;
  show_copy_button?: boolean;
  loading_status?: LoadingStatus | undefined;
  theme_mode: ThemeMode;
}>;

Base Component

Example Component

Compact preview component with text truncation for gallery and table displays. Perfect for showing markdown previews in lists or grid layouts.

export { default as BaseExample } from "./Example.svelte";

// BaseExample component interface  
export default class BaseExampleComponent extends SvelteComponent<{
  value: string | null;
  type: "gallery" | "table";
  selected?: boolean;
  sanitize_html: boolean;
  line_breaks: boolean;
  latex_delimiters: LatexDelimiter[];
}>;

Example Component

Types

interface LatexDelimiter {
  left: string;    // Opening delimiter (e.g., "$", "$$")
  right: string;   // Closing delimiter (e.g., "$", "$$") 
  display: boolean; // Display mode vs inline mode
}

interface CopyData {
  value: string; // Content being copied
}

type ThemeMode = "system" | "light" | "dark";

// Complete LoadingStatus interface from @gradio/statustracker
interface LoadingStatus {
  eta: number;
  queue_position: number;
  queue_size: number;
  status: "pending" | "error" | "complete" | "generating" | "streaming";
  show_progress: "full" | "minimal" | "hidden";
  scroll_to_output: boolean;
  visible: boolean;
  fn_index: number;
  message?: string;
  progress?: {
    progress: number | null;
    index: number | null;
    length: number | null;
    unit: string | null;
    desc: string | null;
  }[];
  time_limit?: number | null;
}

External Types:

  • LoadingStatus - From @gradio/statustracker (complete definition above)
  • Gradio<T> - From @gradio/utils
  • SvelteComponent<T> - From svelte
  • ThemeMode - From @gradio/core