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’ll demonstrate the extensibility of ToolJet by using 3rd party libraries.
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 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 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 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 efficiently.
You can check out ToolJet docs for further learning or join the ToolJet Slack community for doubts and queries.
