CWA Logo

About
Components Web App

How CWA compares

The power of a
predictable data structure

With the rise in decoupled websites and the power of front-end frameworks, we began to think about a data structure that would fit for every website; what did every website need?

We didn't want to have to re-make common functionality for each website every time, and if we had a predictable data structure, it would be possible to have a powerful website builder and advanced functionality, while enabling a developer to create any website with complete flexibility.
Decoupled web apps
Decoupled/headless web apps are data driven. This opens up a world of possibilities - data can be shared between other web services, create API abstraction layers, and so much more.
Less code, great DX
Easily use abstract classes, traits, and PHP annotations for the API. The front-end module builds on top of a UI layer and has ready-to-use components and powerful composables to get you up and running quickly.
Convention over configuration
Using a pre-defined directory and file structure allows the Nuxt module to get you up and running fast. You can also add custom configuration to improve the user experience.
Free & Open-Source
CWA is free, open source and MIT licensed. Everyone can access, audit, contribute and explore the code and documentation.

Love writing content
draft, refine, publish

Making updates to a website requires time and thought. With publishable components, drafts are created when you make changes and ready to publish when signed off.
  • Easy to configure
    Just 2 lines of code - an annotation and a trait and your component is enabled for advanced publishable features.
  • Add state-specific validation
    Use pre-defined validation groups to apply validation specific to the component state. In the example, the Title resource cannot have a blank title property when it is in a published state.
  • Set a time to publish
    Publish a draft now, or schedule it for a date and time. Visitors keep seeing the live version until then.
api/src/Entity/Title.php
<?php
...

#[Silverback\Publishable] 
#[ApiResource(mercure: true)]
#[Orm\Entity]
class Title extends AbstractComponent
{
  use PublishableTrait; 

  #[Assert\NotBlank(groups: ['Title:published'])] 
  #[Orm\Column(type: 'text', nullable: true)]
  public ?string $title = null;
}

Prefer trusting
the web designers

Unlike other website builders, we don't believe website admins should have unlimited creative freedom.
  • Components used as intended
    As a developer, you can easily specify which components can be added to which component groups.
  • Pre-configure styles
    Designers and developers define the styles that a website admin can select from. This keeps your client on brand, no matter who updates the site.
  • Build components your way
    Web designers and developers are provided with helpers. We do not impose any HTML structure or stylistic choices. Build, extend and express as you want.
Leave it to the professionals

Feel united with
real-time updates

We integrate with Mercure to push real-time updates from the API to website users.
  • Publish changes immediately
    When you make a change, affected users get an immediate notification so they can stay up to date.
  • Collaborate on changes
    See who else is editing, on which page and in which field. Type in the same text together and your changes merge as you go, with each person's cursor on screen.
  • Authenticated updates
    With authentication built in by default, the browser will only receive updates for relevant resources. Website visitors will not be exposed to draft component updates.
Stay in sync with CWA

Impress & convert
with fast websites

We have optimised the system for the fastest response times and an enhanced user experience.
  • Simple, small API responses
    Each API request returns a small amount of data and a single resource instead of complex and deeply nested data.
  • UX: Speedy first impressions
    The page UI updates as soon as the primary resources are loaded from the API or local cache for the fastest FCP (First Contentful Paint) possible. CWA only loads the resources each page needs, and reuses resources from a local cache if they exist on multiple pages.
  • Caching and Preload Hints
    Rendered pages and API responses are cached, and purged by cache tag only when the content in them changes. Vulcain preload hints speed up the requests that remain.
CWA is built for Speed - Plane breaking sound barrier

Freedom to choose
your own (file) path

We have built in easily configurable file uploads and a file storage abstraction layer with Flysystem.
  • Easy to configure
    Similar to publishable components, with a little config and annotations, you'll have file uploads setup in no time.
  • Pre-configured file-systems
    Flysystem has several file storage systems already built in, such as Google Cloud, AWS S3, Azure Blob and Local Storage.
  • Build your own file storage adapter
    Documentation to configure your own file storage is readily available and there are more third-party file storage providers available.

Easy & flexible to
build & deploy

When it comes to deploying your application, we know designing the tech stack can be difficult. We have done all the heavy lifting.
  • Dockerized
    We have built the tech stack into Docker containers and Docker Compose configurations so it is vendor agnostic and can be easily deployed.
  • Kubernetes & Helm
    Deploy to your own Kubernetes cluster with the included Helm chart. The Nuxt front end autoscales out of the box, and scaled mode lets the API autoscale too, with a shared cache and real-time hub.
  • Bash scripts for CI
    The template has pipelines for GitLab and GitHub. Both call a bash script with functions for the common tasks, so it is easy to create your own for other CI providers.
  • Optimised tech stack
    We use a Caddy server with FrankenPHP in worker mode, and the Caddy modules for Mercure, Vulcain and Souin are pre-configured. The template includes a k6 load-testing harness and a Lighthouse audit, so you can measure your own site.

Technical FAQs

Common technical questions about CWA