TL;DR: We are launching the APEX Template Studio - an online playground to design with the APEX template syntax. 

It is available for free at: https://apex-template-studio.united-codes.com

The playground

The APEX Template syntax is a powerful tool for visualizing your data with custom templates. You can embed your queried columns and, most importantly, add conditions to fine-tune the look of your data based on its values. The template syntax is available in many places, like search configurations, combo boxes, template components, the new APEX 24.1, select one and select many items, and more.

Designing a template from within APEX is quite tedious. You write it in the shared components you need to save, run a page with some data to see it in action, and repeat that for each reiteration. To make this easier, the APEX Template Studio offers a playground where you have your template on the left side and can immediately see the up-to-date result on the right side.

The editor

By default, you are in the HTML editor, where you can edit your template, including your data attributes and conditions. With tabs, you can also switch to the CSS editor to define some styles to make your template look nice.

The last tab is for entering data for your template attributes. Notice how the three boxes show different button styles? This is because three data sets are defined. For each of them, the playground renders a separate instance of your template so you can test different states at a glance.

How does the template syntax work?

To give you a quick look at what you can do with the template syntax, we included some documentation you can access by scrolling down in the studio. You can quickly copy some examples to include in your template. 

We also have some examples that showcase the syntax in use, which you can access via the button in the header. The first one, Template Directives Demo, showcases all the available template syntax. The Chat example shows how to use these principles to implement a real-life use case.

Saving and sharing

To save your creations for later, you can sign up or log in with a United Codes account. After that, you can just use the save button and choose a fitting name. You can also share your creations with colleagues or the public. Just use the hamburger button in the top-right corner to copy the share link to the clipboard. Don’t worry; people can’t change your creation; they get a copy of it that they can play around with themselves.

Conclusion

We aim for the APEX Template Studio to be your go-to place for learning, testing, and designing with APEX Templates. Please let us know if you have great ideas for it or if it is missing something. We are also looking forward to seeing your creations, so please go ahead and share them on social media using #APEXTemplateStudio

If you are inspired to create a template, visit the Template Studio at https://apex-template-studio.united-codes.com - it's FREE!