HTML5 Custom Tags: ChatGPT Autocomplete & Text Features
19 September 20248 min read
Among the modern HTML standards and specifications, there’s something called Custom Elements. For those unfamiliar, it's a way to create your own tags, which the browser automatically initializes when it encounters them in the markup, executing the specific behavior logic you’ve defined. Additionally, there’s a way to modify the behavior of standard tags (though the nuances of this are beyond the scope of this discussion).
In this tutorial, we will create a smart HTML tag—a text field that helps users format the text they enter. This tag can be used on any website, in any web application built with modern frameworks, or even in a simple static HTML file.
Preparatory Steps
First, let's define the technologies we'll be using. We need to initialize a project with Parcel, get familiar with the Symbiote.js library, and obtain an API key from ChatGPT. If you are not familiar with Custom Elements, please read the howto.
Install Symbiote.js
SymbioteJS is a lightweight JavaScript library designed to simplify the creation of web components and improve the development experience with custom HTML elements. Built with modern web standards in mind, it offers a simple and efficient way to structure, style, and manage reusable components, without the need for heavy frameworks.
Create a Component
Next, we’ll create our component. Since this project is quite small, we’ll implement it directly in the app.ts file.
Now let's create a HTML file
An important aspect here is the block with the import map. In our example, we will include the SymbioteJS library via CDN, which will allow us to efficiently and repeatedly share a common dependency among different independent components of the application, without the need for bulky solutions like Module Federation. Additionally, since we initially installed the dependency through NPM, we will have access to everything necessary for our development environment tools, including type declarations for TypeScript support, entity definitions, and more.
Template
Let's create a template
The code snippet defines a template for a SmartTextarea component using a template literal. This template describes the HTML structure of the component, along with some dynamic bindings and event handlers.
The plus sign (+) at the beginning of the name indicates that the property is computed, meaning it is automatically derived when the state properties change or can be manually triggered using a special method called notify.
State Entities and Handlers
Now let's describe the properties and methods that we bind to the template.
Now we need an array containing descriptions of text styles, which we will create in a separate module called textStyles.ts with the following content:
Additionally, in the code above, we can see examples of how to access the elements described in the template using the ref interface, such as:
This is similar to how it works in React and helps avoid manually searching for elements using the DOM API. Essentially, this.ref is a collection of references to DOM elements that have the corresponding attribute set in the HTML template, such as ref="text".
Request to the LLM
Now we need to do the most important thing: ask the AI to rewrite our text according to the specified settings. In this example, I will keep it as simple as possible, without using any additional libraries or access control layers, by sending a direct request to the API:
Now, we need to create a configuration module (secret.ts), which we will hide from prying eyes using .gitignore:
Styles
We just need to add styles to our web component.
Full code
This template sets up a user interface that allows users to input text, specify a preferred language, adjust the style of the text using a range input, and interact with an AI for rewriting text. The use of ref and event bindings provides a way to interact with these elements programmatically within the SmartTextarea component, making it dynamic and responsive to user actions.
Now, run:
Now we can use the