Devs working with Drupal and Twig templates know the effort it takes to convert these into Single Directory Components (SDC). The process can often be manual and time-consuming, involving the creation of multiple configuration files. To streamline this, we’ve introduced a code-gen tool designed to simplify and speed up the conversion of your Twig components into SDC format.
SDC started as an experimental feature in Drupal, gaining traction with each release. This shift ties directly into the Experience Builder, which will rely on SDC as the standard for future page-building within Drupal. As this approach becomes essential for developers, our tool helps to get you future-ready, making it easier to transition and work easily with the upcoming changes.
Here’s a closer look at how the tool works and why it’s set to change the dev workflows.
What is Twig and SDC?
We don't really need to get into too much detail here, but it helps set the stage for the rest of the blog. So, Twig is a widely-used templating language in Drupal that makes it easier to manage the display of your website’s frontend. While Twig helps with organizing HTML templates, moving to Single Directory Components (SDC) introduces another layer of complexity. SDC requires separate configuration files, usually in YAML format, that define the properties and structure of each component.
Manually creating these files can be a hassle, especially for larger projects. That’s where the code-gen tool comes in.
Introducing the code-gen convertor
This tool was created with a few key goals in mind—coding isn’t just a technical process, it’s a creative one. Devs worldwide are constantly working on tight deadlines, and we wanted to give our code friends a way to save time. Whether they’re looking to speed up the conversion of Twig templates into SDC or simply take a break to explore what’s latest in AI.
The Twig to SDC Converter simplifies the conversion of existing Twig templates into SDC-compatible components, saving time and reducing manual effort. By analyzing the provided Twig code, the tool automatically generates the .component.yml file, eliminating the need for manual setup entirely.
Here’s how it works in a few easy steps:
Upload Your component files
Simply zip your component folders, which may include Twig files, CSS, JavaScript, and other assets. You can upload multiple components at once, simplifying the process and saving time.
Automated processing
Once uploaded, the tool gets to work. It analyzes and processes each component, automatically generating a .component.yml file that includes all necessary properties, example values, and configurations for the component to work seamlessly within SDC.
Download the results
After the conversion is complete, you can download your components along with their newly generated .component.yml files. You also have the option to delete your uploaded files right away, and for added security, any remaining files will be automatically deleted after 24 hours.
Smart features
The tool uses built-in intelligence to:
- Identify component properties and types based on your Twig code.
- Generate example values that can be used within Experience Builder.
- Keep you informed with real-time progress logs as it processes your components.
For example, if you upload a Button component, the tool can detect props like variation and label, along with any default values.
Bringing it all together
While the tool streamlines the conversion process, it might not cover every scenario perfectly. Some props or specific cases may need a little extra attention, which is why we recommend reviewing the generated files to ensure everything fits your unique project requirements.
Think of our Twig to SDC convertor as a helpful assistant that takes care of the heavy lifting, while you fine-tune the details where needed.
Give the Twig to SDC Converter a try and see how it can streamline your workflow. We’d love to hear feedback and ideas from the community—whether it’s suggestions for this tool or thoughts on future automation tools you’d like to see!