Text and HTML: Learn Alpine.js

Learn Alpine.js

Sign in Get started

Playing

09. Text and HTML

Transcript

00:00

So we're going to do a quick recap of xtext and then we're going to look at the xhtml directive which allows us to, as it suggests, output html. Let's start with a really simple component here

00:12

again and just say xdata and let's go ahead and output a string. Let's kind of go back to the example we initially looked at where it was hello world. So we know that we can use any element, doesn't matter what it is, it could be an h1, and we can use xtext in here to output the value of whatever you wanted. Let's actually make this hello world. So let's go over, check this out,

00:35

and we get hello world output as the h1. So pretty much any element you can use xtext on that actually allows you to set text within it, doesn't matter, as long as it can set some inner text it will work. Now we already discussed that this can be an expression or some other method that you want to call on this like toUpperCase, that's going to work as well. We get hello world in

00:57

shouting and let's get rid of that extra r and so on and so forth. So you could again do some kind of calculation inside of xtext and that would work as well. You kind of get the idea. But what about outputting html? Let's say that you made a request to your API, you had some html perhaps there that you wanted to output, you would not get on with xtext. Let's have a look at this. So I'm going to

01:23

go ahead and just comment this out and let's create another div down here to demo this. Let's just say we're working with markdown which we're actually going to look in the next practical project in the next episode. We're going to build a markdown parser with alpine. So let's just say we had some kind of markdown in here that was rendered or some kind of body of a comment maybe

01:46

that had a paragraph in here or something else. Let's just say hello. Now that's not going to work if we use xtext. So let's just use xtext output that body and see what we get. And this would actually probably be a div. So let's just swap this over and let's have a look. There we go. We get the literal output with these characters. If we inspect this you can see it's literally just

02:11

them characters being output. Instead what we can do is use xhtml. Let's go over and see the difference and there we go. We actually have a paragraph. Let's make this say strong just to demo this out and there we go. You can see that that works. Now it goes without saying that you have to be really careful with what you output using xhtml. You need to make sure that this is not

02:36

freely user submitted information. For example if you were using xhtml on data that had been submitted through by a user you are potentially allowing cross-site scripting attacks in your application. But this can be really useful for things like markdown that has been pre-parsed and sanitized on your server. With that said let's take a look at doing that in the next part.

Episode summary

In this episode, we first do a quick recap on how to use the x-text directive to output text in your components. We go over how it works on pretty much any HTML element that can contain text—like using x-text inside an h1 to display "hello world," or running expressions such as toUpperCase() inside x-text to transform the output.

After that, we explore a big limitation of x-text: it only outputs raw text, so any HTML tags inside your data will just be rendered as plain strings. This means if you're dealing with content like server-rendered markdown or any HTML fragments, x-text isn't going to cut it.

That's where x-html comes in! We look at how swapping to x-html allows you to output actual HTML (like paragraphs and strong tags) from your data, so it renders correctly in the browser. There's also a quick but very important security warning about not using x-html on untrusted user input, since that could open you up to cross-site scripting attacks.

Finally, we tee up the next episode, where we'll put this knowledge to work by building a markdown parser with Alpine.js.

Episode discussion

No comments, yet. Be the first!