AI Drupal・3 min read・Posted on October 3, 2024 # Converting Twig to SDC made simple with code-gen tool by QED42 ![Converting Twig to SDC made simple with code-gen tool by QED42](/sites/default/files/remediation-media/66fe9b3ce50a084746fc04b7_Twig_to_SDC_Blog_cover.avif) Table of contents - [What is Twig and SDC?](#what-is-twig-and-sdc) - [Introducing the code-gen convertor ](#introducing-the-code-gen-convertor) - [Upload Your component files](#upload-your-component-files) - [Automated processing](#automated-processing) - [Download the results](#download-the-results) - [Smart features](#smart-features) - [Bringing it all together](#bringing-it-all-together) 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**](https://www.drupal.org/project/twig_to_sdc) 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! Written by Priyanka Jeph Content Design Lead ## We'd love to talk about your business objectives [ Contact Us ](/contact)