Realtime component-based visual composer

Development
1

Good day everyone,

I would like to contribute to this project by creating a real-time component-based visual composer similar to Storyblok or Builder io . I’ve been working with CMS’s since 5 years, and I also managed to create a first concept with another tech stack.

@Sebastian I tried to contact you through email regarding a suitable place/topic in the forum to further discuss this matter :slight_smile:

Please, let me know your thoughts on this.

Best wishes,

1 Like
2

I think it is a good idea, but it also requires an SDK for react (as an example to make it usable). What do you mean with realtime?

I have built an example a while ago: Could be a starting point: squidex-samples/jscript/react/sample-compose at master · Squidex/squidex-samples · GitHub

3

@Sebastian Thanks for sharing the example! I took the time to thoroughly review how the React sample editor works. I also skimmed through the Custom Editor documentation, and I believe/hope I now have a clearer understanding. I also believe I should take the take and write down everything that crossed my mind initially :blush:

A couple of questions for clarification:

  1. Is the custom editor intended for users to build their own editor, embedded in an iframe, based on the Squidex API?
  2. If that’s the case, does it mean that Squidex itself doesn’t include a built-in editor, but rather allows users to fully customize the editor’s appearance and functionality within the Squidex app?

I’d like to share my initial thoughts on the real-time visual composer concept I’m proposing. Here’s a quick disclaimer: The idea is inspired by the UX of Headless CMS’s like Storyblok and Builderio, which I believe are well-designed for users to achieve their goals without investing lots of time in configuration.

Concept Overview:

The idea is to have a built-in visual composer where users can define both content schemas and UI component definitions for various use cases (e.g., landing pages, UI elements). Here’s where the real-time communication comes in: data transfer would occur between the iframe and the Squidex app in real time while editing, adjusting, curating their content.

Users could leverage any front-end framework they prefer (Nuxt, Next.js, etc.), or use their existing setup, with the only requirement being an SDK to fetch the data and dynamically render the landing page or other UI elements, based on what they create in the visual composer.

Key Differences from the Existing Solution (As I Understand It):

  • Current Custom Editor: Requires users to use an entire React SDK to build and render a landing page within Squidex.
  • My Proposal: Offer an SDK to fetch Squidex data, allowing users to dynamically render their application using any tech stack (e.g., integrating with an existing e-commerce platform to dynamically create a landing page or add elements like a promotional teaser in a specific category).

Example API Response:

{ // <--- This is the starting of the content e.g. landing page
  "id": 231231,
  "title": "Hello world",
  "component": "app-hello-world", // <-- used to dynamically render the ui components
  "content": { /* any user-defined content */ }, // <-- you can define fields or place child elements in a body (array)
  "path": "hello-world",
  "fullPath": "/hello-world",
  "translations": {
   "de": "/hallo-welt",
  },
  /* ...could be more sophisticated... */
}

This tech-agnostic API approach would free users from needing to build custom editors themselves and, therefore, reducing development overhead. They can focus on defining UI component schemas (e.g., text fields, rich text, nested child elements), creating the content, and fetching it through the provided API.

Does This Mean Replacing the Custom Editor?

No, that’s not the intention! :eyes: The goal is to complement the existing editor by providing an alternative solution that allows greater flexibility and less overhead for those who prefer to focus on rendering content dynamically, using their own technology stack.

I hope this clarifies my proposal, and I’d love to hear your thoughts!

4

Yes, but usually you don’t need the Squidex API. One popular use case is to have a search to include identities from third-party services into your content.

Depends what you mean with “editor”. Everything is technically a field editor, from simple input to complex rich text, but there is no built-in editor for visual composers.

The current editor extension are for a single field only. In Squidex you already have components, which are very similar to composers without the visual aspect. So for me the question is:

  • How do you make the connection between visual design and the actual frontend code?

And this part is super difficult to make agnostic. e.g. builder.io has an SDK for every programming language and I don’t see a way around that (see Integrate Pages - Builder.io)

Edit: I think storyblok only provides a better preview experience, similar to this approach: Preview Content | Squidex

5

hey @h-ARTS, i am building something like that in vuejs.
But it is not open source till now.

If you are interested just send me a mail: hi@matthiasdollfuss.dev