logo polydile dile-components


A web component to transform plain text into HTML applying breaklines and transform URLs into links.


npm install @dile/dile-html-transform


Import the component.

import '@dile/dile-html-transform/dile-html-transform';

Use the component

You can assign the text to transform in the "text" property of the component. Then, the <dile-html-transform> component will show the transformed text, to display break lines and links on the URLs.

Transformations available:

Cross-Site Scripting note: This component will not parse strings with HTML. It uses Linkify-string to convert URLs into HTML links. So, any HTML entities in the input strings will be converted to encoded characters. Later we use the lit unsafeHTML directive, to display the link on the document. Although, it is always important to validate the input to prevent xss attacks.

<dile-html-transform text="Hi! from DesarrolloWeb.com. Why not to follow us on twitter.com?" convertLines convertLinks></dile-html-transform>

In order to make the desired conversions you need to provide the following attributes:

This component depends on Linkify.js

This component load Linkify.js library by it-self, to convert the URLs in the text into links. You don't need to load this library manually.

dile-html-transform demos

Simple demo

<dile-html-transform text="I found Escuela.it a interesting site. Contact them at contacto@escuela.it" convertLines convertLinks></dile-html-transform>

Interactive demo

class MyComponent extends LitElement {
  render() {
    return html`
      <dile-html-transform id="transform" convertLines convertLinks></dile-html-transform>
    <button id="links">Toggle links</button> <button id="lines">Toggle breaklines</button>

  firstUpdated() {
      let transformElement = this.shadowRoot.getElementById('transform');
      document.addEventListener('DOMContentLoaded', function() {
         transformElement.text = `Hi!
The main search engine is google.com.
...but I think bing.com is also a great option.`
      this.shadowRoot.getElementById('links').addEventListener('click', function() {
        transformElement.convertLinks = !transformElement.convertLinks;
      this.shadowRoot.getElementById('lines').addEventListener('click', function () {
        transformElement.convertLines = !transformElement.convertLines;
customElements.define('my-component', MyComponent);
export const JsStory = () => html`<my-component></my-component>`;