observable-framework-project-structure

The standard directory layout for an Observable Framework project organizes files into key directories like `src` for components and `data` for data loaders. This structure clarifies file conventions and maps source directories to web routes for maintainability.

File-based routing in the Observable Framework maps Markdown file names and locations directly to URL routes. Files like `index.md` automatically generate corresponding web routes, simplifying navigation and project architecture without manual route configuration.

The `observablehq.config.js` file defines core configuration settings for an Observable Framework codebase. It works alongside the standard directory layout to establish project conventions, manage data loading locations, and control overall application behavior.

Data loaders should be placed in the designated `data` directory within an Observable Framework project structure. Organizing data loading locations in this specific directory maintains project comprehension and ensures data is routed correctly to components.

You organize components in an Observable Framework application by placing them in the `src` directory. This standard directory layout separates component organization from data loading locations, facilitating project comprehension and maintainability for developers.