Git-based Visual CMS for Deno, </>htmx and Tailwind Apps.
deco.cx · docs · login · join our discord · X
[!TIP] It takes less than 1 minute to get up and running with Deco.
deco-sites
GitHub repository and your
very own *.deco.site
domain.Your site is now ready to edit with our beautiful visual CMS. All changes will be saved to git!
Now, to get to production, install any of the Hosting apps available in
deco.store
by clicking on "Create new production environment".
Deco's core feature is generating a content editor UI from your TypeScript
interface Props
. For example, declaring a ProductShelf JSX component with
these Props
...
import ProductCard, { Layout } from "$store/components/product/ProductCard.tsx";
import type { Product } from "apps/commerce/types.ts";
export interface Props {
products: Product[] | null;
title?: string;
description?: string;
layout?: {
headerAlignment?: "center" | "left";
headerfontSize?: "Normal" | "Large";
};
cardLayout?: Layout;
}
export default function ProductShelf(props: Props) {
/** JSX Preact + Tailwind UI Section **/
}
... will automatically generate this admin UI for you:
Explore the capabilities of Deco further in our comprehensive documentation. Learn how to craft Sections, Loaders, Apps and much more. Go to deco.cx/docs/en.
Deco aims to radically simplify web development — like it was in the 90s, but with all the modern good stuff baked in. We propose that this starts by elevating TypeScript into a globally shared vocabulary of types that bridge the gap between interfaces and APIs. The simplicity of defining a type and getting auto-completions with multiple matching integrations from a community of Deco apps is a game-changer for developer productivity — both human and AI. It's a shift towards a more collaborative and efficient web development paradigm, where the community's collective effort translates into individual project success. No more reinventing the wheel, no more silos, no more wasted time. Just focusing on customer needs, getting the data from wherever you need, when you need it, and allowing everyone in the team to create and publish great content with that data, safely.
To learn more about why we built deco, visit our Why We Web manifest at https://deco.cx/why.
Join the community on deco.cx Discord Server. Share your apps, explore others' creations, and contribute to the shared vocabulary that makes Deco a thriving ecosystem.
With Deco you can:
Deco Blocks are interoperable: one's output can be visually configured as another's input in the visual editor, based on matching TypeScript types.
For example, a Product Shelf UI component might depend on a Product[]
.
There are many ways to get a Product[]
, such as fetching it from an ecommerce
platform (like Shopify
or VTEX) or a search
optimization provider (like
Algolia or
Typesense). Deco will
automatically suggest matching integrations based on the defined type from a
wide range of available apps, and the developer can choose the one that best
fits their needs. Building UIs can now be abstracted completely from their
data integration. Code against a known-type, get tons of first-class
integrations, ready-to-deploy.
To try out our visual editor, navigate to the deco.cx playground, choose a template, and experience a simplified yet powerful way to build web apps.
Shared Vocabulary: Define the type you need, and Deco auto-completes with multiple matching integrations from a global community of apps. It's TypeScript taken a step further, turning types into a shared vocabulary that powers your UI and API integrations.
Pre-built Implementations: Speed up your development with ready-to-use Sections, Loaders, and Actions. A treasure trove of pre-built implementations awaits to be discovered and utilized in your projects.
Community-Driven Ecosystem: Engage with a global community of developers on deco.hub. Share, discover, and collaborate to enrich the shared vocabulary that Deco thrives on.
Simplified Development Workflow: Just define your types, and let Deco handle the rest. It streamlines the workflow from type definition to UI rendering and API integration.
Interoperable: Deco facilitates seamless interaction between different apps and platforms. It’s about breaking down silos and fostering a more interconnected web development ecosystem.
The deno project created with Deco is completely standalone — all of the CMS information is neatly packed in JSON files along with the code. Deco is merely a git-based editor.
This means you can deploy a Deco project easily to any hosting platform you want. By using our integrated hosting partners, you get full first-class environment support an observability inside Deco.
[!WARNING] Self-hosting the editor itself is coming in early 2025. Bear with us as we refactor some innards before we can invite more developers to extend it! We're looking forward to it.
You can also deploy any Deco app to deco.cx — the managed infrastructure by the authors of this project.
With any deco.cx subscription, you also get:
Here is a table with the integrations that we have built and the statuses of these projects.
Integrations | Home | PLP | PDP | Cart | Checkout proxy | Order placed proxy | My account proxy |
---|---|---|---|---|---|---|---|
VTEX | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
VNDA | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Shopify | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Linx | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Linx impulse | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Nuvemshop | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Wake | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
Environment Variable | Description | Example Value |
---|---|---|
ENABLE_LOADER_CACHE |
Flag to enable or disable the loader cache | true |
LOADER_CACHE_START_TRESHOLD |
Cache start threshold | 0 |
WEB_CACHE_ENGINE |
Defines the cache engine(s) to use | "FILE_SYSTEM,CACHE_API" |
FILE_SYSTEM_CACHE_DIRECTORY |
Directory path for file system cache | /tmp |
CACHE_MAX_SIZE |
Maximum size of the file system cache (in bytes) | 1073741824 (1 GB) |
CACHE_TTL_AUTOPURGE |
Flag to automatically delete expired items from the file system cache (cpu intensive) | false |
CACHE_TTL_RESOLUTION |
Time interval to check for expired items in the file system cache (in milliseconds) | 30000 (30 seconds) |
CACHE_MAX_AGE_S |
Time for cache to become stale | 60 (60 seconds) |
We welcome contributions! Whether you’re fixing bugs, improving the documentation, or proposing new features, your efforts are valuable. Check out our contribution guidelines to get started.