observable-framework-files

Load and manage files in Observable Framework projects with FileAttachment.

Updated Feb 28, 2026

Search Tags:#build process #asset management #data loading #file handling #observable framework #file attachment

Ready to run

npx skills add https://github.com/spqw/skill-observable-framework --skill observable-framework-files

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: observable-framework-files
Source: https://github.com/spqw/skill-observable-framework/tree/main/skills/observable-framework-files
Command: npx skills add https://github.com/spqw/skill-observable-framework --skill observable-framework-files

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the process of incorporating various file types into Observable Framework projects, ensuring efficient data handling and asset management.

Core Features & Use Cases

File Attachment: Load static or dynamically generated files using the FileAttachment function.
Content Loading: Supports numerous file formats including JSON, CSV, images, text, and more via specific methods (e.g., .json(), .text(), .image()).
Routing and Build Integration: Automatically copies referenced files to the output directory during build, with content hashing for cache-busting.
Use Case: Load a volcano.json dataset for visualization, display an image.jpg in your dashboard, or process a data.csv file using Arquero.

Quick Start

Use the observable-framework-files skill to load the content of 'data.json' as JSON.

Frequently Asked Questions about observable-framework-files

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

FAQPage Schema

How do I load a CSV file in Observable Framework for data visualization?▼

To load a CSV file in Observable Framework, use the FileAttachment function with the .csv() method to parse static or dynamically generated data for visualization. This handles content parsing and routes the file during the build process.

What is the best way to display images in an Observable Framework dashboard?▼

Displaying images in an Observable Framework dashboard uses the FileAttachment function combined with the .image() method. This approach manages asset handling and automatically copies referenced files to the output directory during the build.

Can I use dynamic data loaders for JSON files in Observable Framework?▼

Observable Framework supports dynamic data loading via data loaders for JSON files. Using FileAttachment, you can load both static and dynamically generated JSON datasets, integrating directly with the build process for efficient data handling.

Does Observable Framework automatically handle asset management and cache-busting?▼

Observable Framework handles asset management by automatically copying referenced files to the output directory during the build process. It applies content hashing to file attachments to ensure effective cache-busting for updated assets.

What file formats are supported for data loading in Observable Framework projects?▼

Observable Framework supports numerous file formats for data loading, including JSON, CSV, images, and text. Specific content parsing methods like .json(), .text(), and .image() load and process these various file types.

Why are my static file attachments not showing up in the Observable Framework output directory?▼

Static file attachments must be referenced using the FileAttachment function to be recognized during the build process. Observable Framework automatically copies referenced files to the output directory, so incorrect references will bypass this routing.