---

     

---

💻 Deco is the other side of Code: an open-source web editor for building high-performance apps.

👁️ It turns your TypeScript code into a visual no-code editor, right on the web.

⚡ It gives you visibility over performance both in UI and data fetching, accelerating the creation of high-performance websites.

⚙ It's focused on reusability and composability of UI components (Sections) and API integrations (Loaders and Actions).

📤 Sections, Loaders and Actions can be packaged and installed with one click as Apps.

Get started on our playground

Deco combines the best of visual page editing (like Webflow) and the ability for app composition at the admin level (like Wordpress), allowing for new features to be installed and managed in a few minutes, with no code.

To start building right now, go to https://play.deco.cx and follow the instructions to run a Deco project locally.  

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:

Deploy to your own infrastructure

The deno project created with Deco is completely standalone — all of the CMS information is neatly packed in a JSON file along with the code.

This means you can deploy a Deco project easily to any hosting platform you want.

⚠️ Self-hosting the editor itself is coming in early 2024. Bear with us as we refactor some innards before we can invite more developers to extend it! We're looking forward to it.

Deploy to the deco.cx edge - FREE for personal projects

You can also deploy any Deco app to deco.cx — the managed infrastructure by the authors of this project.

It's free for unlimited sites up to 5,000 pageviews monthly!

With any deco.cx subscription, you also get:

• Managed edge infrastructure with 3-second deploy
• Managed Web Analytics by Plausible
• Managed Observability with tracing and error logging by HyperDX
• Access to ALL premium deco.hub apps
• Infinite revision history for all CMS changes
• Team support with roles and permissions
• Guest support (for allowing your customers to edit their sites).
• And a bunch of other features we launch every month :)

Documentation

Explore the capabilities of Deco further in our comprehensive documentation. Learn how to craft Sections, Loaders, Apps and much more. Go to https://deco.cx/docs.

Why use Deco?

With Deco you can:

• Craft modern web apps with a visual configuration editor for managing APIs, UIs and content — all in the same place.
• Compose pre-built features from a community-driven ecosystem of Apps, with one-click installation.
• Evolve your Apps with built-in realtime feature flags, rolling out code or content to specific audiences.

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.

Key Features

• 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.

Motivation

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.

Community

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.

3P Integrations

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	✅	✅	✅	✅	✅	✅	✅

Cache env vars (WIP)

Environment Variable	Description	Example Value
CACHE_UPLOAD_BUCKET	The AWS S3 bucket name for cache uploads	BUCKET-NAME
CACHE_AWS_REGION	AWS region where the cache bucket is located	sa-east-1
CACHE_AWS_ACCESS_KEY_ID	AWS access key ID for authentication	``
CACHE_AWS_SECRET_ACCESS_KEY	AWS secret access key for authentication	``
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,S3"
FILE_SYSTEM_CACHE_DIRECTORY	Directory path for file system cache	``
MAX_CACHE_SIZE	Maximum size of the file system cache (in bytes)	1073741824 (1 GB)
TTL_AUTOPURGE	Flag to automatically delete expired items from the file system cache	true or false
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)

Contribute

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.

Thanks to all contributors