Build an HTML To Markdown Converter using ToolJet📋
Tags: webdev, javascript, beginners, tutorial
Published: 2024-07-04 13:05:46

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](https://github.com/mixmark-io/turndown?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library), while the Markdown preview will be rendered using the [react-markdown](https://www.npmjs.com/package/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:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nldb333nq4ytyhsfpcyf.png)

---
### Prerequisites:
**ToolJet**(https://github.com/ToolJet/ToolJet) : An open-source, low-code business application builder. [Sign up](https://www.tooljet.com/signup) for a free ToolJet cloud account or [run ToolJet on your local machine](https://docs.tooljet.com/docs/setup/try-tooljet/) 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](https://docs.tooljet.com/docs/tooljet-concepts/what-are-components) 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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/71o2pr63y20cgtv0uyp5.png)

### 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`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khmc06dd6h8c0xas7wgn.png)

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](https://docs.tooljet.com/docs/tooljet-concepts/what-are-queries) named `importTurndownLibrary` to import the Turndown library.
- Use the following code in the query to import the library:

```javascript
// 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l99vh8a3m6uwjx92filx.png)


### 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:

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e60btw0gozshpmnsyagj.png)


### Button Actions

- For the **Convert** button, create a new **On click** [event](https://docs.tooljet.com/docs/tooljet-concepts/what-are-events), set the Action as **Run Query**, and select `convertToMarkdown` as the Query.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yl5ig5foh5nen0z8b2r.png)

- 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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yw3ooa0b9461f6kiri88.png)

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:

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

- Use the following code to render the Markdown preview:

```javascript
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);
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2a6l46zc7mkbivkij35.png)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x52gtfv8b8ntysalaeb5.png)

---
## 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](https://docs.tooljet.com) for further learning or join the ToolJet Slack community for doubts and queries.