In the following example, you will explore the most advanced way of creating websites with Wolfram Language. You will combine native chrome (HTML/JS/CSS) based on standard web technologies with a computation layer that leverages the extensive algorithmic and data resources of Wolfram Language.

This will show you how to integrate static files with Active Web Elements to build a dynamic webpage that queries the dictionary resources built into WordData.

Active Resources

This webpage is going to have two very simple Wolfram Language APIs—to be more specific, two deployed APIFunction expressions.

First, connect to the local instance of the Wolfram Web Engine:

The first API is going to display the results of a given dictionary query:

It is very simple to understand what this API does. It accepts a single string parameter and uses that string to search WordData for definitions. It then destructures the list of rules to construct a nicely formatted grid.

The result is then exported to HTML. One could also take the list of rules that is the output of WordData and construct a dynamic XMLTemplate that will display the result. This technique was not chosen for the sake of brevity, but the following section will show a similar approach to construct a static file.

The second is used for autocompleting the form input:

It simply takes a string and, if it is longer than two characters, it selects the WordData entries that start with it. The result is then exported as a JSON array so that the JavaScript library you are using can make use of it.

Static Resources

In what follows, you will construct a very simple HTML page that contains elements of CSS and JS inline and that provides a form with a single input field to search a dictionary. This examples makes use of a JS library called autoComplete.js in order to show suggestions as the user types.

In order to make the code reusable in case the deployed APIs were to change location, use an XMLTemplate with a TemplateSlot for each APIFunction created previously: the one assigned to the dict variable is going to become the form action, whereas the one assigned to the auto variable is going to be used as a data source by the autocomplete library.

The use of TemplateApply and XMLTemplate in the following is necessary to make this example self-contained. In a more typical workflow, one would use their editor of preference to write HTML and then deploy the edited file:

Once everything is deployed, one can visit and interact with the page: