search

deco-cx / deco

Git-based Visual CMS for Deno, </> htmx and Tailwind apps. Deploy on any Deno-compatible host.
https://deco.cx
Apache License 2.0
635 stars 39 forks source link
cms deno fresh frontend hacktoberfest htmx platform preact tailwind tailwindcss typescript webflow wordpress

readme

deco

Git-based Visual CMS for Deno, </>htmx and Tailwind Apps.

deco.cx · docs · login · join our discord · X

jsr   Deno Land   Discord   Deco Twitter   Build Status


Deco web editor


Getting Started

[!TIP] It takes less than 1 minute to get up and running with Deco.

  1. Visit deco.new and choose a template.
  2. Choose a name and create a site. This gives you a free deco-sites GitHub repository and your very own *.deco.site domain.
  3. Follow the instructions to clone your repo and run your development server locally, or deploy to Deno Deploy with one click for free.

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

TypeScript Props to Visual Content Editor

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:

CleanShot 2023-11-14 at 16 51 51

Documentation

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.

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.

To learn more about why we built deco, visit our Why We Web manifest at https://deco.cx/why.

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.

Deco's advantages

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.

Key Features

Deploy to your own infrastructure

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.

Deploy to the deco.cx PRO edge

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:

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

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