Repository files navigation

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

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

• Modern stack focused on performance and JavaScript-independence
  • Server-side JSX templates
  • ⁠Client-side HTMX interactivity
  • Local development with HTTPS tunnel — edit on the web, commit on your localgit.
  • ⁠Native Tailwind Theme Support with multiple Component Libraries supported:DaisyUI, Preline, FloatUI, Shadcn UI
• Easy for business users and content editors
  • TypeScript Props to Content Editor UI generator
  • Asset manager with multimedia support
  • Publishing workflow with staging area, immutable releases and immediaterollbacks
  • Roles and permissions for content-only editors(invite 1 content-editormember for free per site!)
• ⁠Deploy with one click to any Deno-compatible host
  • Deno Deploy (Preferred Partner) — Global platform with generous free tier
  • Azion Edge(Coming soon)
  • Fly.io(Coming soon)
  • Nirvana Cloud(Coming soon)
  • Digital Ocean(Coming soon)
  • deco.cx PRO hosting: $99 USD/mo for always-on multi-zone deployment on ourEnterprise-scale managed infrastructure.

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

Your site is now ready to edit with our beautiful visual CMS. All changeswill be saved to git!

Now, to get to production, install any of the Hosting apps available indeco.store by clicking on "Create new production environment".

Deco's core feature is generating a content editor UI from your TypeScriptinterfaceProps. For example, declaring a ProductShelf JSX component withtheseProps...

importProductCard,{Layout}from"$store/components/product/ProductCard.tsx";importtype{Product}from"apps/commerce/types.ts";exportinterfaceProps{products:Product[]|null;title?:string;description?:string;layout?:{headerAlignment?:"center"|"left";headerfontSize?:"Normal"|"Large";};cardLayout?:Layout;}exportdefaultfunctionProductShelf(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 todeco.cx/docs/en.

Deco aims to radically simplify web development — like it was in the 90s, butwith all the modern good stuff baked in. We propose that this starts byelevating TypeScript into a globally shared vocabulary of types that bridge thegap between interfaces and APIs. The simplicity of defining a type and gettingauto-completions with multiple matching integrations from a community of Decoapps is a game-changer for developer productivity — both human and AI. It's ashift towards a more collaborative and efficient web development paradigm, wherethe community's collective effort translates into individual project success. Nomore reinventing the wheel, no more silos, no more wasted time. Just focusing oncustomer needs,getting the data from wherever you need, when you need it,andallowing everyone in the team to create and publish great content withthat data, safely.

To learn more about why we built deco, visit ourWhy We Web manifest athttps://deco.cx/why.

Join the community ondeco.cx Discord Server. Shareyour apps, explore others' creations, and contribute to the shared vocabularythat makes Deco a thriving ecosystem.

WithDeco you can:

• Craft modern web apps with avisual configuration editor for managingAPIs, UIs and content — all in the same place.
• Compose pre-built features from acommunity-driven ecosystem of Apps, withone-click installation.
• Evolve your Apps withbuilt-in realtime feature flags, rolling out code orcontent to specific audiences.

Deco Blocks are interoperable: one's output can be visually configured asanother's input in the visual editor,based on matching TypeScript types.

For example, a Product Shelf UI component might depend on aProduct[].There are many ways to get aProduct[], such as fetching it from an ecommerceplatform (likeShopifyorVTEX) or a searchoptimization provider (likeAlgolia orTypesense). Deco willautomatically suggest matching integrations based on the defined type from awide range of available apps, and the developer can choose the one that bestfits their needs.Building UIs can now be abstracted completely from theirdata integration. Code against a known-type, get tons of first-classintegrations, ready-to-deploy.

To try out our visual editor, navigate to thedeco.cx playground, choose a template, and experience asimplified yet powerful way to build web apps.

• Shared Vocabulary: Define the type you need, and Deco auto-completes withmultiple matching integrations from a global community of apps. It'sTypeScript taken a step further, turning types into a shared vocabulary thatpowers your UI and API integrations.

• Pre-built Implementations: Speed up your development with ready-to-useSections, Loaders, and Actions. A treasure trove of pre-built implementationsawaits to be discovered and utilized in your projects.

• Community-Driven Ecosystem: Engage with a global community of developers ondeco.hub. Share, discover, and collaborate to enrich the shared vocabularythat Deco thrives on.

• Simplified Development Workflow: Just define your types, and let Deco handlethe rest. It streamlines the workflow from type definition to UI rendering andAPI integration.

• Interoperable: Deco facilitates seamless interaction between different appsand platforms. It’s about breaking down silos and fostering a moreinterconnected web development ecosystem.

The deno project created with Deco is completely standalone — all of the CMSinformation is neatly packed in JSON files along with the code. Deco is merely agit-based editor.

This means you can deploy a Deco project easily to any hosting platform youwant. By using our integrated hosting partners, you get full first-classenvironment support an observability inside Deco.

You can also deploy any Deco app todeco.cx — the managedinfrastructure by the authors of this project.

With anydeco.cx subscription, you also get:

• Managed edge infrastructure
• Realtime Web Analytics based on Clickhouse
• Observability with tracing and error logging by HyperDX
• Access to alldeco.store 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 :)

Here is a table with the integrations that we have built and the statuses ofthese projects.

We welcome contributions! Whether you’re fixing bugs, improving thedocumentation, or proposing new features, your efforts are valuable. Check outour contribution guidelines to get started.