Build an HTML To Markdown Converter using ToolJet📋

In this tutorial, we will walk through the steps to build an HTML to Markdown Converter using ToolJet. This application allows users to input HTML code and get the corresponding Markdown output which can be copied with a button click. Using ToolJet's intuitive pre-built components, we'll design an elegant UI in just 5 minutes. The HTML to markdown conversion will be managed by the Turndown JavaScript library, while the Markdown preview will be rendered using the react-markdown library.

ToolJet's Run JavaScript query and Text component can be utilized to convert HTML to Markdown and preview the content without using external libraries. However, in this tutorial, we are looking to demonstrate the process of using 3rd party libraries in ToolJet.

Here's a preview of the complete application:

Prerequisites:

ToolJet(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. Sign up for a free ToolJet cloud account or run ToolJet on your local machine using Docker.

Basics of JavaScript: A basic understanding of JavaScript is essential for this tutorial since we will use JavaScript and React libraries to handle the logic for converting HTML to Markdown and previewing the markdown content.

To begin, create a new application named HTML To Markdown Converter.

Step 1: Creating the UI

Header

• Add a Container component at the top of the canvas and rename it to headerContainer.
• Add an Icon and a Text component inside the Container. Rename them to logo and headerText respectively.
• Set the text to "HTML to Markdown Converter" and select an appropriate icon for the app in the Icon component.

Input Section

• Add another Container component on the left and rename it to inputContainer.
• Inside the container, add a Text component labeled "Enter HTML Code:". Rename it to enterHTMLLabel.
• Below the label, add a Textarea component for the HTML input and rename it to htmlInput.

Output Section

• Add a container next to the input section and rename it to outputContainer.
• Add a Text component labeled "Markdown Preview:" below the input section. Rename it to markdownLabel.
• Add a Custom Component to display the Markdown output and rename it to markdownOutput.

Buttons

• Add a Button component labeled "Convert" below the Textarea component. Rename the button to convertButton.
• Add another Button component labeled "Copy Markdown" besides the Convert button and rename it to copyButton.

The UI of the application is done. Time to focus on the functionality.

Step 2: Adding Queries and Events

Import Turndown Library

• Create a Run JavaScript code query named importTurndownLibrary to import the Turndown library.
• Use the following code in the query to import the library:

// Function to add script dynamically
function addScript(src) {
    return new Promise((resolve, reject) => {
        const scriptTag = document.createElement('script');
        scriptTag.setAttribute('src', src);
        scriptTag.addEventListener('load', resolve);
        scriptTag.addEventListener('error', reject);
        document.body.appendChild(scriptTag);
    });
}

try {
    // Importing turndown
    await addScript('https://cdnjs.cloudflare.com/ajax/libs/turndown/7.0.0/turndown.js');

    // Showing a success alert
    await actions.showAlert("success", 'Turndown JS is imported');
    turndownService.turndown(components.textarea1.value);
} catch (error) {
    console.error(error);
}

• Enable the Run this query on application load? toggle to automatically run this query every time the app loads.

Convert HTML to Markdown

• Create another Run JavaScript code query named convertToMarkdown.
• Use the following code in the query to convert the text entered in the htmlInput component to markdown:

const turndownService = new TurndownService();
const markdown = turndownService.turndown(components.htmlInput.value);

return markdown;

Button Actions

• For the Convert button, create a new On click event, set the Action as Run Query, and select convertToMarkdown as the Query.

• For the Copy Markdown button, create a new On click event, set the Action as Copy to clipboard the {{queries.convertToMarkdown.data}} as the Text.

Most of the key functionality is now configured. In the next step, we will use a Custom Component to import a React library to preview the markdown content.

Step 3: Creating Markdown Preview

Add Custom Component

• In the Custom Component, add the data that will be returned by the convertToMarkdown query:

{{
   { preview: queries.convertToMarkdown.data}
}}

• Use the following code to render the Markdown preview:

import React from 'https://cdn.skypack.dev/react';
import ReactDOM from 'https://cdn.skypack.dev/react-dom';
import { Container } from 'https://cdn.skypack.dev/@material-ui/core';
import Markdown from 'https://esm.sh/react-markdown@9';

const MyCustomComponent = ({ data }) => (
    <Container>
        <Markdown>{data.preview}</Markdown>
    </Container>
);

const ConnectedComponent = Tooljet.connectComponent(MyCustomComponent);
ReactDOM.render(<ConnectedComponent />, document.body);

With this, the HTML to Markdown converter is ready. Time to see it in action!

Step 4: Preview and Testing

• Test the application by entering various HTML snippets and checking the Markdown output.
• Ensure that the Copy Markdown button works correctly.

Conclusion

We have successfully built an HTML to Markdown Converter using ToolJet in just minutes! This application is designed to simplify your content formatting process, and you can easily expand its functionality based on your specific requirements. Explore the capabilities of ToolJet to create similar projects and enhance your workflow.

You can check out ToolJet docs for further learning or join the ToolJet Slack community for doubts and queries.