Forem: Dualite Technology Private Limited

Introduction to Web Components: Creating Reusable UI Elements

Ayush Thakur — Thu, 24 Oct 2024 15:51:15 +0000

In modern web development, reusability and modularity have become important factors in building scalable and maintainable applications. As the complexity of web applications is growing, developers look for ways to efficiently manage their code, particularly the user interface (UI). This is where Web Components come into the picture.

Web Components allow developers to build reusable, encapsulated UI elements that can be used across various web applications, regardless of the framework or library. In this blog, we'll dive into what Web Components are, how they work, and why they can be a game-changer in web development.

So, let’s get started!

What are Web Components?

Web Components are a set of web platform APIs that allow developers to create custom, reusable HTML elements with their own behavior and style. These elements are independent and encapsulated, which means they won’t be affected by the styling or behavior of other components on the page.

At their core, Web Components are built using three main technologies:

Custom Elements: These allow you to define your own HTML tags and associated behavior.
Shadow DOM: This helps in encapsulating the styles and markup, ensuring that the component’s internal structure remains hidden and unaffected by external styles.
HTML Templates: Templates provide reusable chunks of HTML that can be stamped into the DOM when needed, offering a way to define reusable UI without rendering it immediately.

Together, these technologies allow you to create components that are self-contained and reusable across different parts of your application, or even different projects.
Why Use Web Components?

Web Components come with several benefits that make them a compelling choice for developers:

Reusability: You can create components once and use them anywhere, which speeds up the development process.
Encapsulation: With Shadow DOM, you can ensure that the styles and logic inside the component don’t interfere with the rest of your application.
Framework-Agnostic: Web Components work across any framework, making them highly versatile. Whether you're using React, Angular, Vue, or plain HTML, you can integrate Web Components effortlessly.
Interoperability: Web Components can be easily shared between projects, teams, and even across organizations, promoting collaboration and standardization.

How to Create a Basic Web Component

Now that we understand what Web Components are, let’s look at how to create one. We'll start by building a simple custom button component using native JavaScript.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Button Component</title>
</head>
<body>

  <my-button>Click Me!</my-button>

  <script>
    class MyButton extends HTMLElement {
      constructor() {
        super();

        // Attach Shadow DOM
        this.attachShadow({ mode: 'open' });

        // Create button element
        const button = document.createElement('button');
        button.textContent = this.textContent;

        // Add styles
        const style = document.createElement('style');
        style.textContent = `
          button {
            background-color: blue;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
          }
          button:hover {
            background-color: darkblue;
          }
        `;

        // Append the button and style to the Shadow DOM
        this.shadowRoot.append(style, button);
      }
    }

    // Define the new element
    customElements.define('my-button', MyButton);
  </script>
</body>
</html>

In this example:

We create a class MyButton that extends HTMLElement, allowing us to define a new HTML tag <my-button>.
Inside the constructor, we attach a Shadow DOM to encapsulate the component’s internal structure.
We define the button’s styling using the <style> tag and append it to the Shadow DOM along with the button element.
Finally, we register the component using customElements.define().

With this, we've created a custom button component that can be reused throughout your application by simply using the <my-button> tag.

Best Practices for Web Components

Here are some best practices you should follow when building Web Components:

Use Shadow DOM Wisely: It’s great for encapsulating styles, but remember that it also means you’ll need to manage your own accessibility (e.g., making sure ARIA attributes are properly added).
Name Custom Elements Appropriately: Always use a dash (-) in custom element names (e.g., <my-button>). This is required by the specification to differentiate custom elements from standard HTML tags.
Keep Components Small and Focused: Like any good UI component, your Web Component should have a single responsibility and be easily testable.
Use Slots for Flexibility: Slots allow you to create placeholders inside your component where content can be dynamically injected. This is especially useful when building more complex components that require customization.

When to Use Web Components

While Web Components are powerful, they aren’t a one-size-fits-all solution. Here are some cases where they shine:

Design Systems: If your team is building a design system, Web Components can help ensure consistency across multiple applications and frameworks.
Cross-Framework Projects: Since Web Components are framework-agnostic, they are perfect for projects where multiple frameworks are used, or when you need to switch frameworks without rewriting the entire UI.
Reusability Across Teams: If your company has different teams working on various projects, Web Components provide a standardized way to share UI elements across projects.

Conclusion

Web Components provide a modern, standardized approach to building reusable and encapsulated UI elements. By leveraging Custom Elements, Shadow DOM, and HTML Templates, you can create powerful, framework-independent components that enhance both code maintainability and UI consistency. Whether you're working on a design system, or simply trying to make your UI more modular, Web Components offer an elegant solution.

This is another advantage of using Dualite. Dualite can also be used to create reusable web components that can form the entire layout of a webpage.

How to Optimize Your React App for Performance

Ayush Thakur — Wed, 16 Oct 2024 15:37:24 +0000

In today’s fast digital world, having a web application with optimized performance is crucial for maintaining user satisfaction and engagement. When it comes to React apps, optimizing performance not only improves the user experience but also helps in reducing load times, minimizing resource usage, and boosting overall responsiveness.

Given that React apps can range from small-scale to highly complex, knowing the right strategies for performance optimization is key.

In this blog, we’ll cover practical techniques to optimize your React app and ensure it runs smoothly, regardless of the complexity.

Let's dive in!

1. Avoid Unnecessary Renders

React is efficient when it comes to rendering, but unnecessary re-renders can still slow down your app. A common reason for unnecessary renders is passing down new props to child components, even if the data hasn’t changed.

To prevent this, you can use React.memo for functional components and PureComponent for class components. These tools help by memoizing the component, ensuring that it only re-renders when its props or state actually changes.

Here’s an example:

const MyComponent = React.memo((props) => {
  return <div>{props.value}</div>;
});

In this case, MyComponent will only re-render if the value prop changes, preventing unnecessary updates and boosting performance.

2. Use Code-Splitting and Lazy Loading

For large React apps, loading everything at once can result in slow initial load times. Code-splitting allows you to split your code into smaller chunks, loading only what’s needed when it’s needed. This reduces the bundle size and improves loading times.

React’s React.lazy and Suspense are great tools for implementing code-splitting and lazy loading.

Here’s an example of how you can implement lazy loading:

const MyLazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyLazyComponent />
    </Suspense>
  );
}

With this approach, MyComponent is only loaded when it’s actually needed, improving initial load time.

3. Optimize Component Size

React developers often use third-party libraries to speed up development. However, some of these libraries can be bulky and add to your app’s overall size, affecting performance.

You can minimize your bundle size by:

Only importing the specific parts of libraries that you need (tree-shaking).
Avoiding heavy libraries when lightweight alternatives are available.
Monitoring your bundle size using tools like Webpack Bundle Analyzer to see which parts of your app are taking up the most space.

For example, instead of importing the entire lodash library, you can import only the functions you need:

import debounce from 'lodash/debounce';

4. Use useCallback and useMemo Hooks

In React, the useCallback and useMemo hooks help in preventing unnecessary re-calculations or re-creations of functions and values.

useCallback is used to memoize functions so they don’t get recreated on every render.

useMemo is used to memoize expensive calculations and avoid recalculating values unnecessarily.

Here’s an example:

const memoizedValue = useMemo(() => expensiveCalculation(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a), [a]);

By using these hooks, you can prevent your app from wasting resources on recalculations, which enhances performance.

5. Optimize Images and Static Resources

Large image files can dramatically increase load times and slow down your app. Here’s how you can optimize images and other static resources:

Compress images using tools like ImageOptim or TinyPNG.
Use modern formats like WebP to reduce file size without compromising quality.
Lazy-load images so that they are only loaded when they come into view, improving initial page load time.

<img src="image.webp" loading="lazy" alt="example image">

6. Minimize Reconciliation and Re-renders

React’s reconciliation process ensures that only the parts of the DOM that need to be updated are changed. However, if your components frequently re-render unnecessarily, this can impact performance.

To minimize this, avoid directly mutating the state or props, and make sure to structure your component hierarchy in a way that limits how much of your app needs to re-render when the state changes.

7. Use Efficient State Management

Managing state in large React apps can be complex and lead to performance bottlenecks if not handled efficiently. While React’s built-in useState and useReducer hooks work well for small to medium apps, consider using libraries like Redux or MobX for more complex applications.

However, when using state management libraries, make sure to:
Keep your state minimal.

Avoid storing unnecessary data in the global state.
Use selectors to ensure that components only re-render when necessary data changes.

8. Keep the Virtual DOM Light

React’s Virtual DOM diffing algorithm is optimized for performance, but it’s still important to keep your component tree shallow and efficient. Avoid deeply nested components that result in excessive DOM nodes.

Try to break down complex components into smaller, reusable pieces and minimize the number of elements rendered at once.

Conclusion

Optimizing a React app for performance is an ongoing process. By reducing unnecessary re-renders, leveraging code-splitting, and optimizing state management, you can ensure that your app runs smoothly, even as it scales. Remember that a fast, responsive app not only improves user experience but also enhances the app’s SEO performance.

With Dualite, you get optimized ReactJS code that's not only conversion-ready but also ensures faster load times and seamless performance for your web applications.

Using CSS Variables for Theme Customisation

Ayush Thakur — Sat, 12 Oct 2024 13:14:19 +0000

CSS variables, also known as custom properties, offer a flexible and efficient way to implement theme customisation across web applications. By defining reusable values in a single place, you can easily manage and apply themes throughout your site without repeating yourself in the code.

In this blog, we’ll explore how to use CSS variables for theme customisation, and why this approach is beneficial for modern web design.

What are CSS Variables?

CSS variables allow you to store values for reuse across your stylesheets. You can think of them as placeholders that can be updated in one spot but reflected throughout your entire CSS file.

Here’s a simple example of defining and using a CSS variable:

:root {
  --primary-color: #3498db;
}

button {
  background-color: var(--primary-color);
}

In this example, --primary-color is the variable, and you can access it using the var() function wherever you need it. The :root selector defines the variable at the global level, meaning it can be accessed anywhere in your stylesheet.

Why Use CSS Variables for Themes?

When building applications that require multiple themes (like light and dark modes), CSS variables shine. Instead of hardcoding colors or font sizes throughout your stylesheet, you can store these values in variables and switch themes by changing the values dynamically.

Let’s dive into some key reasons why CSS variables make theme
customisation more manageable:

Consistency Across Components: By using variables, your UI components will remain consistent. When you need to update a theme color or font size, you only need to adjust it at a single place.
Dynamic Theme Switching: You can easily switch themes with JavaScript by updating the CSS variable values on the fly, allowing for real-time theme changes without the need for page reloads.
Easier Maintenance: Updating a design system is much easier when variables are used. For example, if you need to tweak the primary color, you only change it in one place, and the change will propagate throughout the entire site.

Implementing Theme Customisation with CSS Variables

Let’s say we want to build a simple dark mode and light mode theme switcher using CSS variables. We start by defining our theme variables in the :root selector for the default (light) theme:

:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

Next, we define the dark theme by updating the variable values in a custom class. This class will be toggled when switching between themes:

.dark-mode {
  --background-color: #2c3e50;
  --text-color: #ecf0f1;
}

With this setup, all that’s left is to toggle the dark-mode class on the body element using JavaScript when the user switches themes:

const toggleTheme = () => {
  document.body.classList.toggle('dark-mode');
};

Advanced Theme Customisation

CSS variables aren’t limited to just colors. You can use them for any CSS property, such as fonts, spacing, or even animations. Here’s an example of customising font sizes:

:root {
  --base-font-size: 16px;
  --heading-font-size: 2rem;
}

body {
  font-size: var(--base-font-size);
}

h1 {
  font-size: var(--heading-font-size);
}

This level of control allows you to adjust not only colors but also the overall look and feel of your themes dynamically.

Accessibility Considerations

When implementing theme customisation, it’s important to consider accessibility. Ensure that your themes offer sufficient contrast between background and text colors to accommodate users with visual impairments. Tools like WebAIM’s contrast checker can help you ensure that your themes meet accessibility standards.

Conclusion

CSS variables offer a powerful way to customise themes, ensuring consistency across your design while making updates and theme switches simple. Whether you’re building a simple website or a complex web app, integrating CSS variables into your workflow can streamline your development process and improve maintainability.

By leveraging this technique, you’ll provide users with a seamless, dynamic experience that can adapt to their preferences—all with minimal code changes.

No matter which approach you take for theme customization, Dualite can support your workflow. Dualite seamlessly integrates with CSS variables, offering optimized code generation that helps keep your site performing at its best.

Tailwind vs Custom CSS: What Should You Choose?

Ayush Thakur — Mon, 07 Oct 2024 16:12:53 +0000

When building a website, one of the fundamental decisions you’ll face is how to handle your CSS. Should you rely on a utility-first framework like Tailwind CSS, or write custom CSS from scratch? Each approach has its strengths and trade-offs, and the right choice depends on your project’s requirements, developer preferences, and future scalability.

In this blog, we will explore both Tailwind and custom CSS, diving into what makes them unique, their benefits, and when to choose one over the other. By the end, you'll have a clearer understanding of which method best suits your next project.

Let’s get started.

What is Tailwind CSS?

Tailwind is a utility-first CSS framework that provides low-level utility classes to help you style your elements directly in your HTML. Unlike traditional CSS frameworks that come with predefined components (like Bootstrap), Tailwind allows you to build custom designs by combining utility classes without writing any actual CSS.

For example:

<div class="bg-blue-500 text-white p-4 rounded-lg">
  This is a Tailwind-styled div
</div>

Instead of creating custom class names and writing CSS rules for them, you use pre-built utility classes like bg-blue-500 for background color, text-white for text color, p-4 for padding, and so on.

What is Custom CSS?

Custom CSS refers to writing your own styles from scratch. This involves defining your class names and assigning CSS properties and values to control the appearance of elements. You have complete freedom over how you write your styles, including organizing them into reusable components or creating a design system tailored to your needs.

Here’s an example:

<div class="custom-div">
  This is a custom CSS styled div
</div>

<style>
  .custom-div {
    background-color: #3490dc;
    color: white;
    padding: 16px;
    border-radius: 10px;
  }
</style>

In this case, you define a custom class (custom-div) and manually apply your CSS properties in a <style> block or an external stylesheet.

Tailwind CSS: Pros and Cons

Pros:

Rapid Development: Tailwind speeds up the development process by allowing you to apply styles directly in your HTML. No need to switch between your CSS and HTML files constantly.
Responsive by Design: With built-in responsive utilities like sm:, md:, and lg:, Tailwind makes it easier to apply breakpoints and design for different devices.
No Naming Conflicts: Since Tailwind relies on utility classes, you don't have to worry about creating conflicting class names, which is a common issue when working with custom CSS.
Consistency: The use of predefined utility classes enforces a consistent design system throughout your project, making it easier to maintain the codebase.

Cons:

HTML Bloat: Styling everything in your HTML can lead to a bloated codebase, with long class strings that may reduce readability.
Learning Curve: While Tailwind is powerful, there’s a learning curve involved, especially if you’re used to traditional CSS methods.
Customization Limits: Although Tailwind offers great flexibility, some developers find that it limits creativity, as you're constrained by its pre-built utilities unless you extend the framework.

Custom CSS: Pros and Cons

Pros:

Full Control: With custom CSS, you have complete control over your styles, making it easier to implement highly specific designs that may not be achievable with a utility-first framework.
Cleaner HTML: Custom CSS allows you to keep your HTML clean and uncluttered, focusing purely on structure while your styles are defined separately.
Scalability: If organized well, custom CSS can scale efficiently with large projects. By building reusable classes and components, you can create a robust design system that adapts to future needs.

Cons:

Slower Development: Writing custom CSS can take longer than using a utility-first framework, especially for common styling patterns that Tailwind handles out of the box.
Potential for Inconsistency: Without a predefined design system, it's easy for custom CSS to become inconsistent across pages, especially when working in a team or on a large project.
Maintenance: Over time, managing a growing custom CSS codebase can become challenging, especially if not well-organized. Naming conflicts and specificity issues may arise.

Tailwind or Custom CSS: Which Should You Choose?

Both Tailwind and custom CSS have their advantages, but your choice will depend on a few factors:

Project Size:

If you're building a smaller project and need to move fast, Tailwind CSS might be the better option. Its utility-first approach allows for rapid development without the need to set up a comprehensive design system.

For larger projects where scalability and long-term maintainability are key, custom CSS provides more control and can be tailored to the project's needs.

Developer Experience:

Developers who prefer working with pre-built systems and want to focus on functionality rather than design details may find Tailwind CSS more convenient.

On the other hand, if you enjoy fine-tuning every aspect of your design, custom CSS gives you the freedom to do so without being constrained by a framework.

Consistency vs. Flexibility:

Tailwind CSS excels at enforcing a consistent design system across your project, which can be a huge advantage for teams.

Custom CSS offers greater flexibility, which is ideal if your design needs deviate significantly from typical patterns or if you want a highly unique look.

Conclusion

Ultimately, the choice between Tailwind and custom CSS depends on your project’s needs and your personal workflow preferences. Tailwind CSS is perfect for developers who want to speed up their development process and maintain a consistent design system, while custom CSS is ideal for those who want more control over their design and are willing to spend extra time fine-tuning their styles.

Also, no matter what you choose, Dualite is here to help in both scenarios. Dualite supports both Tailwind CSS and custom CSS, allowing you to choose whichever fits your needs best.

How to make your Web Page Responsive

Ayush Thakur — Wed, 02 Oct 2024 05:16:24 +0000

Nowadays, the majority of internet users browse websites on their mobile phones or smartphones. As technology is evolving, more and more devices are making their way into the technology market, be it tablets, foldable smartphones, smart watches, etc. Therefore designing web pages that adapt themselves seamlessly to different viewports has become necessary now.

As per the Statisa, over 1.05 billion people uses the internet in India, and this number is going to increase to 1.20 billion by 2050. These huge numbers show how much important it is to build a web page that is responsive enough.

A good well-designed responsive web page makes sure that the user has an optimal view experience and a uniform user experience irrespective of the device the user is using. Responsiveness not only enhances the user experience but also plays a major role in the SEO ranking of the website.

And when it comes to adding responsiveness, the first thing that comes in mind is the media queries. In this blog, we will go through what are media queries, and how you can use them to make your web page responsive.

So, let’s get started.

What are Media Queries?

Media queries are a CSS technique that enables developers to define styling for different viewports, optimizing the layout and design across various devices. In essence, media queries allow the application of CSS rules based on the characteristics of the device or browser window the user is working with.

By leveraging the width, orientation, and other features of the viewport, media queries ensure that the specified styles are dynamically applied, allowing the webpage to adapt seamlessly to a range of screen sizes. This results in a consistent and optimized user experience, regardless of the device.

To effectively use media queries, you must specify the target viewport characteristics, such as width, and then define the corresponding styles. Here's an example:

@media (max-width: 768px) {
    body {
      background-color: lightgray;
    }
  }

In this example, we have specified the width of the viewport as 768px in the @media query. Furthermore, we have set the background-color property of the body element to lightgray. Therefore, when the width of the viewport is equal to or less than 768px, the background color of the body will change to lightgray.

How Media Query works?

As we have discussed earlier in the blog, Media queries demand two things - the width of the viewport and CSS styling, to show its magic. Let’s break this example:

@media (max-width: 768px) {
    body {
      background-color: lightgray;
    }
  }

Here,

@media - a defined keyword used to initiate media query
max-width - property of media query to define width of viewport
body - element whose styling you want to target
background-color - styling you want to change in that viewport

Here’s another example:

@media (max-width: 1024px) {
    div {
     width: 200px; 
    font-size: 20px;
    color: black;
    border: none;
    }
  }

In this example, we are targeting a div element and changing it’s multiple styling properties under the viewport of width 1024 px.

Along with the max-width property, media queries also use the min-width property. As their names suggest, they work in opposite ways. The min-width property in a media query is used to apply CSS styles when the width of the viewport is equal to or greater than the specified width.

Here’s an example:

 @media (min-width: 720px) {
    div {
     width: 200px; 
    font-size: 20px;
    }
    span{
    height: 30px;
    color: blue;
}
  }

Media queries also give us the flexibility to use a combination of both min-width and max-width to target a specific viewport width range. Let’s see an example of it

@media screen and (min-width: 600px) and (max-width: 1200px) {
    body {
      background-color: lightblue;
    }
  }

In this example, we are using a combination of both max-width and min-width to target a viewport width ranging from 600px to 1200px.

Each type of device, such as smartphones, tablets, desktops, and even larger monitors, has a specific viewport width. We can use these viewport widths (breakpoints) to style our web components accordingly.

Checkout this table for the breakpoints:

BREAKPOINT	KEYWORD	DIMENSION
Small	sm	≥576px
Medium	md	≥768px
Large	lg	≥992px
Extra large	xl	≥1200px
Extra extra large	xxl	≥1400px

Until now, we've used pixel units to define width, but media queries also support other length units such as vw, vh, percentages, em, rem, and calc().

Best Practices for Using Media Queries

Mobile-First Approach: Start with the styles for the smallest screens first, then add media queries for larger screens. This approach often results in cleaner and more efficient CSS.
Limit Breakpoints: Use a limited number of breakpoints to keep your styles manageable. Focus on the most common device sizes instead of trying to cover every possible device.
Use Relative Units: Whenever possible, use relative units like percentages, em, or rem instead of fixed units like pixels. This can improve accessibility and responsiveness.
Group Media Queries: Keep all media queries at the end of your CSS file or group them together for better readability. This way, it’s easier to see how styles change across different viewports.
Test on Real Devices: Always test your responsive design on actual devices or using device emulators to ensure that your media queries work as expected.
Avoid Overlapping Queries: Be careful when defining overlapping media queries, as they can lead to unexpected results. Ensure that each query has a distinct range.

Conclusion

Responsive web design is essential in today's multi-device world, and media queries help ensure your site adapts seamlessly to various screen sizes. By using them effectively, you can enhance both user experience and SEO performance. Prioritize responsiveness to future-proof your site and ensure it looks great across all devices.

Also, make sure to checkout Dualite to convert your complex Figma designs into code in a few seconds.

Convert your Figma design to code using Dualite

Ayush Thakur — Sat, 28 Sep 2024 06:46:23 +0000

Creating a User Interface is the first and foremost step that takes place while building a website. Multiple factors like responsiveness, easy navigation, color contrast, pleasing to the eyes, etc, are kept in mind while designing the user interface.

When it comes to designing a UI, Figma is the first and most popular tool that comes to mind. Figma comes with tons of customization that helps to build endless UI designs following the designer's creativity.

After the design is ready, a developer's role comes into play. The developers convert the whole Figma design frontend code. But the problem is it literally takes hours to even convert a simple basic design into code. It’s a very hectic task for a developer to generate code that gives the same result as of created design.

Thus reducing the developer's productivity and that's where Dualite comes to rescue us.

Dualite is an AI-powered designed-to-code tool that allows us to convert the whole Figma design into frontend code within a few seconds. With Dualite, all it takes is a few clicks and a few seconds to convert a complex UI into frontend code.

In this blog, we will walk through the procedure on how you can convert a Figma design into a React code using Dualite. You can simply use the Dualite plugin in Figma and generate the code in a few clicks.

Let's get started

1. Select the Figma Design

Open Figma, and design the UI for your webpage. Once the design is fully created, select the design.

You can select the entire design or any particular section/frame in the design depending upon your choice. The frame you will select will be the one that the Dualite will convert to code.

2. Run the Dualite plugin

In order to use Dualite, we need to run its plugin.

Go to Resources (Shift + I) present on the tools bar, and navigate to the Plugins section.

Search for the Dualite plugin and run it.

3. Login to Dualite

After running the plugin, you need to login to the Dualite plugin using your desired credentials. You can use your Figma account credentials to login to the Dualite plugin.

After successfully logging in, you will see this screen

4. Select the desired mode

Dualite offers us two different modes to convert Figma design into code-

Page Mode: Built for designers to convert the designs into code super fast. It converts the whole design into a single page code. If you don’t want the hassle to tweak the code and understand it, then Page Mode will be an ideal choice for you.
Component Mode: Built for developers to generate interactive and static Reusable components. It scans each element present in the design and creates reusable components for each individual element making it an ideal choice for developers.

For this tutorial, we will select the Component Mode.

Currently, Dualite supports only the React JS library in converting designs into reusable components code. Stay tuned for more JS Frameworks/Library support.

Now, click on the Convert To Code button to start conversion and Dualite will show its magic.

5. Get the Output

Within a few seconds, Dualite will scan the component and generate the code. After the Dualite has successfully generated the code, you will see this screen:

You can download the Zip file of your code and run it locally. Also, you can try and run the code on CodeSandbox by clicking on the Preview Code button.

You can tweak or manipulate the generated code to get the desired results.

Every conversion that you make using Dualite will get saved to your Dualite Dashboard allowing you to access the code anytime in the future.

Checkout the video tutorial

In this tutorial, we took an example of a static webpage for the demo purpose. But websites like eCommerce, Blogging, Portfolio, etc comes with multiple animations and interactions. Dualite also comes with the capability to convert these animations and interactions into code.

Checkout the docs to learn more about it, click here.

Got stuck anywhere? Join our Slack Community

dualite-workspace.slack.com