skills.rest
spqw
spqwCOMMUNITY
Explore all skills by this author →
GitHub

observable-framework-lib-htl

Generate secure HTML and SVG templates with automatic escaping in Observable Framework.

Updated Feb 28, 2026
Search Tags:#security#javascript#svg#html templating#observable framework#htl
One-click install
npx skills add https://github.com/spqw/skill-observable-framework --skill observable-framework-lib-htl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: observable-framework-lib-htl
Source: https://github.com/spqw/skill-observable-framework/tree/main/skills/observable-framework-lib-htl
Command: npx skills add https://github.com/spqw/skill-observable-framework --skill observable-framework-lib-htl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the need for securely rendering HTML content within Observable Framework projects by leveraging the Hypertext Literal (htl) library for safe and context-aware templating.

Core Features & Use Cases

  • Safe HTML Templating: Automatically escapes interpolated values to prevent cross-site scripting (XSS) vulnerabilities.
  • Contextual Interpolation: Handles non-serializable values like event listeners and DOM nodes gracefully.
  • SVG Generation: Provides a dedicated method for generating safe SVG fragments.
  • Use Case: Dynamically generate complex HTML structures, such as interactive tables or charts with embedded event handlers, without compromising security.

Quick Start

Use the htl library to render a button with a click event listener.

Frequently Asked Questions about observable-framework-lib-htl

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I safely render dynamic HTML in Observable Framework without XSS vulnerabilities?▼

To safely render dynamic HTML in Observable Framework, use the htl library for secure HTML templating, which automatically escapes interpolated values to prevent cross-site scripting (XSS) vulnerabilities.

Can I attach event listeners to DOM nodes generated via HTML templating in Observable Framework?▼

Yes, you can attach event listeners to DOM nodes generated via HTML templating in Observable Framework because the htl library handles non-serializable values like event listeners and complex DOM nodes gracefully during contextual interpolation.

Does Observable Framework support dynamic SVG generation with automatic escaping?▼

Yes, Observable Framework supports dynamic SVG generation with automatic escaping through the htl library, which provides a dedicated method for generating secure SVG fragments within your JavaScript modules or Markdown files.

What is the best way to embed interactive charts and tables in Observable Framework Markdown files?▼

The best way to embed interactive charts and tables in Observable Framework Markdown files is using the htl library, which facilitates dynamic content generation and seamlessly integrates complex HTML structures with embedded event handlers.

Are there limitations when interpolating non-serializable values in Observable Framework HTML templates?▼

There are no limitations for interpolating non-serializable values in Observable Framework HTML templates, as the htl library specifically supports contextual interpolation of event listeners and DOM nodes without breaking the secure HTML rendering process.

Related Skills

Explore More Software Engineering Skills→
spqwspqw

observable-framework-convert

Convert Observable notebooks into Markdown and vanilla JavaScript for Framework projects.

Community
Intermediate
bentossellbentossell
467

visualise

Render SVG diagrams, HTML widgets, and charts inline in chat.

Community
Intermediate
spqwspqw

observable-framework-javascript

Execute JavaScript in Observable Framework Markdown for dynamic content and reactive updates.

Community
Intermediate
gerald-icagerald-ica

Cross-Site Scripting and HTML Injection Testing

Detect and exploit stored, reflected, and DOM-based XSS vulnerabilities in web applications.

Community
Advanced