Composably

screenshot of Composably
svelte
vite

Static site generation with typed content + dynamic Svelte components at build time.

Overview

Composably is an innovative tool designed for static site generation that focuses on the integration of typed content alongside dynamic Svelte components at build time. This content processing plugin for Vite and SvelteKit enhances the build process, streamlining how content from various formats like Markdown, YAML, or JSON is managed within your applications. With its ability to treat content as virtual modules, Composably facilitates a highly organized approach to content management, making it a solid choice for those who appreciate a clean separation of code and content.

This plugin stands out for its unique method of treating Markdown not just as a formatting option, but as a data type. This distinct approach lends itself well to data-driven workflows, offering developers an intuitive experience while working with content. Despite some minor rough edges in its API, Composably showcases significant potential, especially for users familiar with traditional static site generators such as Astro or Jekyll.

Features

  • Typed Content Management: Processes and validates content from Markdown, YAML, JSON, or dynamic modules, making them accessible as virtual modules within your application.

  • Separation of Code and Content: Enables a clearer distinction between coding and content authoring, catering to developers who prefer a more organized workflow.

  • Custom Integration: The plugin allows for flexibility with routing, enabling both full-site and partial static site generation with ease.

  • Dynamic Component Interaction: Facilitates embedding dynamic Svelte components directly into markdown, empowering content authors to create rich, interactive experiences.

  • Simple Installation: Easily integrates into Svelte projects by modifying the existing configuration files to include Composably.

  • Extensive Example Library: The library comes with consumer examples and tests to help new users understand its functionalities rapidly.

  • Robust Virtual Export: Exposes processed content through a virtual export called composably:content, providing seamless mapping of paths to page data in your Svelte components.

  • Custom Logic Integration: Allows developers the freedom to add their own logic in the data load processes, giving them greater control over how content is utilized in their applications.

svelte
Svelte

Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.

vite
Vite

Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

typescript
Typescript

TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.

zod
Zod

Zod is a TypeScript-first schema declaration and validation library. It allows you to define schemas that can validate data at runtime while providing excellent TypeScript inference, making it perfect for API validation, form validation, and type-safe data handling.