Understory
Feed
Map
Sign in with your Atmosphere Account
WebTiles Showcase
Ted Han @knowtheory.net · Robin Berjon @robin.berjon.com
Room 2301
presentation
29 min
Mar 29, 3:00 PM
WebTiles Showcase
Your browser does not support video playback.
Ted Han
0:00
Hi, everyone.
0:01
I'd like to introduce the next speaker.
0:03
Hi, everybody.
0:04
We're going to be talking about tiles and some Dazzle stuff.
0:09
For the folks listening on the stream, Hayley is unable to present.
0:13
So we're going to do this instead.
Robin Berjon
0:16
I got— I'm mic'd up.
0:19
So hi, everyone.
0:20
Welcome to the impromptu, slightly impromptu tiles talk.
0:26
I see people taking pictures.
0:27
Hi.
0:29
So let's jump right in.
0:31
The idea is that I'm going to give a pretty short intro.
0:35
Seeing the faces here, I think most of you already know what this is.
0:38
But at least I'm going to run through it pretty quickly.
0:41
And then Ted and Nick, or Ted or Nick, or I don't know, are going to show some really cool demos of stuff they've been building with Tiles.
0:52
So what are tiles?
0:54
Well, they're really like, you know, they're confusing because they're so simple.
1:00
It's, you know, what if you could have like a mini web app as like so many have tried before that could be embedded in anything safely because it can't touch the network.
1:10
That's essentially the whole story.
1:13
And the idea is that you remove a lot of power because you remove network and that's significant for people who do, you know, network things.
1:21
But this reduction in power makes it possible to use this in many more contexts that are potentially security or privacy sensitive, such as social media.
1:33
And so that is pretty cool, especially since the web is pretty powerful.
1:37
So you can build all kinds of stuff with these.
1:40
These are examples of widgets of all kinds that could easily be tiles.
1:45
And the thing is, what's new about this?
1:47
Many people have tried the web app thing before.
1:51
Well, we haven't heard back from them in 20 years.
1:55
Like, I remember, like, if you're really old like me, you'll remember the XML packaging initiative that was trying to put, like, XHTML and SVG inside some kind of thing that you could run as an app and, you know, all that.
2:10
There have been every 2 to 3 years the W3C has some kind of workshop about web apps and, like, really, maybe, guys, we could be solving this at some point, perhaps.
2:20
And there's progress every time, but it's pretty slow.
2:25
And of course, like, you know, you could always use iframes if you don't mind like exfiltrating a ton of information.
2:30
So, you know, this is something that's been tried many times.
2:35
The thing that hasn't been properly tried is just like cutting off the network.
2:41
And that's where things can, I think, get quite interesting.
2:44
And so the anatomy of a tile, is basically it's a small secluded web runtime.
2:51
It can load things that are listed in its manifest.
2:55
One of the values of tiles is that they don't have to be in a zip file.
2:59
Like a lot of the time, like a lot of these things like widgets, I worked on W3C widgets and all that, they had to be in a zip, which means that you can only start showing something after you've loaded the whole zip because you don't know where the index is, you don't know if you have all the resources you need, yada yada, if you have a video, Your zip might be gigabytes big.
3:18
It's all problematic.
3:19
So some people have tried to do stuff around that, but it's usually not great.
3:23
In this case, you load the manifest over AT if they are stored on AT, or you could load it over HTTP.
3:31
It's going to be pretty small.
3:33
And then dynamically setting up a service worker or something like that, you see what you need to load.
3:39
And if you don't need to load everything, maybe you're not watching the video that's included in that thing, that's perfectly fine.
3:44
You could have an entire archive of many things in a tile without ever having to worry about it.
3:51
If we look at basically— this is a PDSLS of a tile that was published on AT Proto.
3:56
Most of the fields are pretty straightforward.
3:59
If you've seen web app manifests, straight out of web app manifests, there's an icon, there's a name, there's a description.
4:07
And one thing that's specific to tiles and that really helps solve this idea of content-addressable apps that you can just move around and publish in different contexts in a way that's completely reusable is that it has this resources thing that maps proper web path.
4:23
So like slash is mapped to this blob of HTML, and like /image.whatever is mapped to a CID of this.
4:32
And these things get to have proper HTTP headers.
4:37
In a lot of previous iterations of content-addressed web things, The headers were not included, so you're getting the content, but without the HTTP headers, you don't have the proper context.
4:48
They might interpret differently in different contexts, and then you're like in a crazy world.
4:53
And so like really, that's about it.
4:55
One of the things that's great is that this example shows them stored on AT, but you could store this anywhere.
5:01
It really doesn't matter because everything's content-addressed throughout the stack, so you can put them in a CAR file, you can put them over HTTP, you can load them with Razzle, so you can razzle dazzle, All of that is pretty cool.
5:14
And so essentially, that's it.
5:17
It's just like, it's basically this small contained thing.
5:22
And what makes it interesting is when you start integrating it in context and giving it extra power.
5:29
So the idea is that the embedding context can say like, oh, hey, this tile actually, I know what's safe for it.
5:35
I can give it access to this specific thing.
5:37
Thing that I've controlled.
5:38
And you're going to see a number of demos of precisely that pattern in action.
5:43
But that's it.
5:43
Like, because you've removed the power, then you can decide what you give to it.
5:47
And so I'm just going to go through a list of like— and these are— most of these are fake except for a couple of ones of like how to put them in different contexts.
5:56
Like very simply, you could have a game in your social media stream, just like in your feed, you're scrolling by and they're like, oh yeah, look, Robin posted a game and like this This is me playing like Minesweeper in the middle of the thing.
6:10
It can be embedded.
6:11
It's completely safe.
6:12
And now, you know, like I hit the bookmark button and I've got a game installed because I can just like go find it.
6:19
And then you could have like some local curation of stuff.
6:22
And of course, because it's loading off a PDS, you can pay wallet.
6:25
So like there's a business model even potentially behind that.
6:30
You can also do long-form content.
6:32
I can give you the slides afterwards.
6:33
Don't have to take pictures.
6:36
You can do long form.
6:36
So this is one of— this is a blog post I wrote a while ago.
6:40
And so you could imagine that in a leaflet kind of interface instead of like, you know, using the leaflet editor, you could embed your own long form source that has your own style and your own, you know, pictures, fonts, etc., just like as part of the normal leaflet publication format.
6:59
And you click that and it opens and you just get the blog post.
7:04
Another thing that's interesting is you can have something called wishes.
7:09
So if any of you are familiar with Android Intents or Web Intents or stuff like that, it's sort of a declarative way of saying, hey, I'm a piece of functionality.
7:19
I'm a tile.
7:20
And I need someone to edit an image for me.
7:24
But I don't want to call a specific program.
7:26
And I definitely don't want to do the thing where you have to save the file to a file system and then the user has to figure out what app they want to use and then give it back to me and all that dance.
7:35
That's like fucking insane.
7:37
And so what you say is that, is you say, hey, I wish to edit, so there's always a verb, this type of data, and here's the data.
7:45
And it will find for you a tile that knows how to carry out that wish.
7:51
And of course, maybe you have it installed, as we said earlier, like bookmarking is installing, so that's sufficient.
7:56
But maybe it's on the network.
7:58
If it was published to AT, you can know that it's able to, you can find things that are able to handle specific requests.
8:04
So you can use the AT data itself.
8:07
And this is just an example of like, you clicked Edit here and it loaded the image inside a filter editor.
8:15
Why not?
8:15
And then when you hit Save, it sends it back.
8:17
And it's really simple, but you can integrate a lot of things in this way with loose coupling.
8:23
This is an example of a tile in Roomie.
8:29
The idea— and I really love this pattern.
8:32
I would love to like— when you get to that part of like building stuff, I would love to work on that.
8:37
The idea here is that you can give tiles, and DeltaChat does that, you can give them a way to just write to a data channel of the channel.
8:47
And so it shares data, but only with other people who are on the channel.
8:51
So you can install a tile to a chat.
8:55
And what's cool about that?
8:56
Yeah, I know it kind of breaks the brain, but like if you think about it, like a chat is a security parameter, right?
9:04
There are people who are inside the chat and can read stuff and people who are on the outside who can't.
9:08
And there's no reason that a chat would like only send text messages.
9:12
Actually, they don't.
9:13
Under the hood, they always send structured something, right?
9:16
And so you send a different structured something that's just data that like, and so you know, user installs a tile to the chat room.
9:24
Everyone in the chat room gets to see that tile.
9:28
And then the thing is, those things can post messages that are basically CRDT, that sync state across every instance of the tile that people in the room see.
9:36
And so you could do something instead of like having all these fucking doodle things that are always ugly and like you lose the link and you never know which one you just like in your chat, you just like drop a time picker thing where you've like configured some options and anyone in the chat can answer and it syncs the options for everyone.
9:55
And you could do that with a document.
9:56
You could have like a shared markdown editor, like let's edit a doc together in the chat.
10:02
So that's another thing.
10:04
Blento, this is almost so obvious that—
Speaker C
10:08
You're killing us, man.
Robin Berjon
10:10
Oh, man, sorry, sorry.
10:11
The thing is, I don't even know what these guys are going to say.
10:14
So sorry about that.
10:15
Let me go faster.
10:16
That way— this thing, this is like, what if we could render arbitrary content by loading a tile that has a render wish?
10:26
And so imagine that you have, like, whatever, this is like a karaoke lexicon, and inside of it, it has a Stratosphere lexicon, and you just want to arbitrarily render things.
10:37
You could load a tile that knows how to render this so that you can do nested rendering of arbitrary embedded lexica.
10:46
And this one is actually my favorite.
10:48
It looks like ass, like most of the things I design, but that's fine.
10:51
That's fine.
10:53
But like the idea here, and actually I'm going to use the real thing if I can find where the cursor goes.
11:02
Yes.
11:03
So the idea here is that they don't have to be on ATProto, right?
11:06
They can be inside a CAR file.
11:08
So you can have a local file that contains a tile that you can run in something that's like a PDF viewer.
11:14
And so you could kill PDF because like, you know, we should kill PDF.
11:18
But we don't just kill PDF by reproducing PDF.
11:22
This is basically a presentation that I gave about tiles that was in a tile.
11:27
And so you can do this, of course.
11:30
But the other thing that you can do is that you can have self-editing documents.
11:36
Because you can make it so that the tile can write to a data segment in its own car container.
11:41
And therefore, this is a rich text thing.
11:44
And I can say like, hi folks, whatever.
11:48
And you see the little save things here?
11:50
If I close this and I email it to Ricardo and he opens it in this and he doesn't have a rich text editor, he just has the PDF replacement thing, then he can open it and edit it.
12:01
And you can do this with arbitrary editors.
12:04
So like for instance here, this MS Paint, and you do this and whatever.
12:11
And then you have an image editor that I can send it over to Ted, and he can edit the image, and yada, yada, yada.
12:18
And so with that, we have websites.
12:23
We have a fake demo shit browser on it.
12:26
It's a Dazzle spec, because everything's Dazzle these days.
12:29
That's how you dazzle people.
12:31
And there's some code that you can check out on the wonderful npmx.
12:34
And you can come to our meetings.
12:37
We share stuff.
12:37
Fuck yeah, tiles.
12:39
And with this—
Speaker C
13:04
Can everybody hear me?
13:06
All right, awesome.
13:07
Nobody can see what is on my screen, so let me just fix that.
13:11
Oh, I'm giving away the thing.
13:12
We're going to go fast.
13:14
This also is extremely unstyled because we've been doing this around organizing a conference.
13:18
So this is more of a tech demo, especially since Robin has given you the dream, in part, and shown a lot of, like, what we thought was really kind of cool about WebTiles.
13:29
So I'm going to run through some of the stuff quickly and just kind of give you a sense of where— once we saw WebTiles, what we immediately thought of, right?
13:36
'Cause the entire pitch that Robin's giving is around having these self-contained little tiles that you know that you can kind of pass around safely, which I think is really an exciting idea.
13:46
And the notion of these things as pieces of contextless content-addressed signed data is really useful, especially when you start thinking, well, okay, what if we reintroduced a little bit of context?
13:59
What context would you want to introduce?
14:02
And so we said, well, why not think about ways in which you could actually gain access to that proto data directly?
14:07
Through this.
14:08
So what we've built is a platform for being able to create and host web tiles.
14:16
And these things are as simple as something really goofy, like an HTML page and some JavaScript.
14:24
And they can be dragged and dropped.
14:27
And there's a reason why I'm going with this super simple example here first, because I want to be able to show that These are things where if you want to handcraft something and just upload it and make something tiny, quick— let's see, hello world clock— you absolutely can.
14:50
You can self-host, or you can upload these things, host them, share them with other people.
14:57
These are embeddable.
15:00
And our whole goal is to be able to build a runtime that can provide a way to load web tiles and connect with your app proto account simply and easily.
15:14
So I'll— whoop— switch between desktops here.
15:18
So this includes things like being able to just take an app URI from, say, a desktop app, and also just load the tile.
15:26
And we've been talking about all the different places in which we could stick and embed these, whether these are within web apps, as Robyn was pointing out, social feeds embedded inside of leaflet posts or other sorts of data structures where you can both be confident of the safety and security of the app that you're embedding and still give users access to all of their data.
15:49
From there though, this gets a lot more exciting.
15:51
We can do quite a lot of things with arbitrary access to data, including crazy things like why don't we build embeddable media players.
16:02
This is data that is up on the protocol.
16:05
And—
Ted Han
16:07
so part of the thing that we built is basically a Razzle CDN.
16:13
As tiles are created and propagate through the network, we look at the CIDs because CIDs are identifiers for both records and for blobs.
16:24
And we can serve them geographically.
16:27
We know that they are generally safe.
16:29
When you label a CID or an ATURI, you know that it's not going to change, which means that you have a certain guarantee of trust in the future.
16:38
And we can return that in chunked streaming forms in whatever mechanisms are necessary for streaming audio, video, et cetera.
Speaker C
16:48
And so we can also define the security boundary here pretty easily and simply to align with the affordances of the protocol, right?
16:56
App Proto has a capability model that allows you to define Yeah, so for example—
Robin Berjon
17:02
What's that?
17:03
And you can.
Speaker C
17:04
Yep, with you cans and other sorts of things.
17:06
So this allows us to do some fun other things that build on the work that we've been talking about for the past year.
17:13
For example, being able to do gated content.
17:17
You could embed an article in, say, a social post that goes and checks whether or not you have proof of purchase or a subscription or a membership to a particular service, and that actually will immediately unlock for you.
17:32
Or if you don't, right, you have a call to action there directly.
17:36
And in this context, right, like maybe it's a call to action to pay for the article.
17:41
And then you issue payment requests here, say, yes, I'd like to pay for this.
17:46
And then it actually goes, makes an XRPC call, proves that you've got the signature, and then loads the rest of the content directly for that record.
Ted Han
17:54
Over the past several months, I've published quite a bit on— how and why ProtoFans works the way it works, attestations, and the whole concept that you can have proof of payment, not web payments, but proof of payment on record in structured ways.
18:10
Which means that if you are a content provider, like with the BetterStack tile that we produced, your payment, your member base of people who have paid for the one-offs or the subscriptions, they follow you if you want to change payment providers or not.
18:26
If you want to change your PDS, or they change their PDS, any combinations of identity and data mobility, which is central to the adproto ethos, like this, this allows and enables that.
Speaker C
18:37
Yeah.
18:38
And this isn't just about connections with your PDS either.
18:41
You can build and launch other services that can talk through xRPC channels and that can extend everything from like little sessions and being able to do real-time-ish experiences like— why don't you give me a high five here?
18:58
[Speaker:SETH GREEN] Yeah, yeah, there you go.
Ted Han
19:00
High fives.
Speaker C
19:00
[Speaker:CHRIS WILSON] Oh, I got to sign the permission.
19:04
And so this provides the opportunity to do things like actually doing games directly in feeds and other sorts of mini multiplayer experiences.
Ted Han
19:13
[Speaker:SETH GREEN] What's really important to note that this isn't magical.
19:16
This tile is entirely sandboxed.
19:20
The tile itself is not making external API calls.
19:24
It's not breaking the boundary, right, that we set from our security profile.
19:28
What it's doing is it's communicating with the runtime, whether that runtime is the browser making XRPC requests that are authenticated and have the context of the user, allowing for a stateless tile that is deterministic in nature thanks to Content Addressable Storage.
19:45
But we have this global context of your PDS and the XRPC calls that you can invoke.
19:51
So we can provide some structure around making queries and procedures and WebSocket connections asynchronously to offer this experience.
Speaker C
19:57
Yep.
19:57
And so we have a bunch of experimental runners, which we have been tinkering with, like for example, this Rust desktop-based one.
20:05
So now we have a—
Robin Berjon
20:07
whoop.
Speaker C
20:08
Oh, OK.
20:09
Don't have the permission for it.
20:10
All right.
Robin Berjon
20:10
Well, come back.
Ted Han
20:11
It's a little strict sometimes.
20:12
There's a query string parameter to allow for create and destruct methods.
Robin Berjon
20:16
Doop, doop, doop.
Speaker C
20:17
So we'll go back to using the web version of this.
20:20
And let's see.
20:23
Hello.
20:33
These are all individual aircraft.
Ted Han
20:38
Hangar software is Han Jarrakinis.
20:41
Just sort of fit.
Speaker C
20:46
And so, right, like, these are little full apps that you can post and do anything you want with.
20:53
So the two things— I mean, and Robin's kind of given the game away here.
20:56
But one of the things that we're— no, no, it's perfect.
20:58
Like, that was great.
21:00
Being able to talk about where we want to put all of these tiles and how can we share these.
21:04
My thesis around this is having good structures allow for people to be able to experiment more.
21:09
And so I started out with a little goofy app that you can hand code if you want.
21:15
But also, this is a great place to safely safely be able to experiment with apps, plug Claude in and say, go for it.
21:22
You can read lexicons out of the Lexicon Garden MCP and give people capabilities to tinker with data, have frontend capabilities on top of the app proto stack, and basically be able to grow the types of things and the access to other communities for building new apps.
Ted Han
21:40
To check the little agentic AI checkbox that's now required everywhere.
Speaker C
21:44
Yeah.
Ted Han
21:44
The difference between an MCP application and a web tile is the runtime.
21:48
So we right now— this service is actually an MCP.
21:52
So if you authenticate in and say load the Hello World tile or load the Create Post tile, it will use the same structure, the exact same runtime structure to make authenticated xRPC calls from within your agent to do things like create posts, make xRPC calls, et cetera.
22:10
And that means that we have broad broad distribution.
22:13
Anyone can say, "Hey, I want to have an allow list of tiles that are going into Rumi," or, "Hey, I want to have a standalone website that displays some of this content and has a runner that supports this payment method specific to this content provider," right?
22:28
And that same tile can then work on a mobile device.
22:31
It can work on a desktop app.
22:32
You can have a local CAR file with a dual CAR, you know, basically data payload that you can give to someone else to load that local data.
22:40
It's truly distributed content.
22:43
And we think that's pretty cool.
Speaker C
22:44
Let's bring back mixtapes.
Robin Berjon
22:46
Yes.
Speaker C
22:48
Okay, we've got like a minute.
22:50
Any questions?
Robin Berjon
22:57
Okay, this is awesome, you guys.
22:58
Like, I wanted to do this 15 years ago.
23:02
So, the— Basically, what I wanted to do is actually put charts, interactive charts or maps, in a feed.
23:12
Okay?
23:13
Okay?
23:14
My question is, with regards to security, so you— I'm guessing you can run a JavaScript here within— right?
23:23
So how does it cross boundaries with, like, if there's Content Security Policy?
23:26
How does that work?
Ted Han
23:27
[Speaker:MANOOCHEHRI] So basically, when the tile runner gets a manifest, it takes that content, and because it's a CID that's recognized, listed in the blob.
23:38
The runtime is ferrying it down, and then it's loaded.
23:43
And that's the same way any assets are referenced as well.
23:46
So like the image gallery one— could you pop that up?
23:48
Yep.
23:50
Image gallery, whether it's JavaScript images, media, et cetera, the runtime is making these calls to determine what can be fed into the sandbox.
Speaker C
24:01
The other thing about this is each one of these tiles, the way that we host them is actually giving them each a their own subdomain based on the CID.
24:09
So they're actually sandboxed based on origin.
Robin Berjon
24:14
Like a synthetic origin?
24:15
Yes.
24:15
Not a DNS origin?
24:16
A random synthetic origin?
Ted Han
24:17
Yes, a synthetic origin.
24:19
Non-deterministic to make it more difficult to avoid two people somehow getting the same DNS and having the chance that there's contamination.
Speaker C
24:29
You have a question?
Robin Berjon
24:31
Are you using wishes in your message channel here or a different type of messaging channel because Tiles Basically, you can use it anywhere you want.
Ted Han
24:38
So wishes— and please do correct me if I'm wrong here— wishes represent the intention of a user to take an action that may involve other tiles.
24:46
This is adjacent to it, and it's specifically XRPC calls within the app proto ecosystem.
24:52
So it's not conflicting and could support it.
24:56
We could look at what layering of tiles or navigation or the wishes concepts look like.
25:03
Yeah.
Robin Berjon
25:05
The wishes are much more for the use case of like arbitrary composition.
25:10
The idea is really task-based computing.
25:12
So you don't— you want your thing needs to carry out a task.
25:15
It doesn't know who else can answer that task.
25:17
And then that means you have like open-ended composition instead of having apps because apps suck.
25:24
Oh, and one small thing I wanted to add.
25:26
I didn't have time to add it to my presentation.
25:28
Some person I'd never met or interacted with the other day on blue sky said, oh, this seems interesting.
25:36
I'll integrate it.
25:36
And then the following day, they shipped a server-based browser that supports tile.
25:41
So it's coming.
25:43
That's awesome.
25:43
For clarification, I was asking so that people would know you don't have to use wishes.
25:47
You can use all kinds of things.
25:49
Is Hangar open source?
Speaker C
25:53
Parts of it.
25:54
Not yet.
Ted Han
25:54
Yeah.
Speaker C
25:55
We intend on open sourcing parts of it.
25:57
But there's a bunch of different components that we're—
Ted Han
26:00
Yeah.
26:00
We think that there's potential value to the community ecosystem to open source both the runtime and the CDN, but then make some of the extra PC services specific to payment processing or other things, the secret sauce of how this thing can sustain itself.
Speaker C
26:19
One last question, and I think we got to wrap up.
Ted Han
26:22
Yeah, I had a question.
Robin Berjon
26:25
Forgive my ignorance.
Ted Han
26:26
This is the first time I've ever heard of WebTiles.
26:28
Is this a W3C thing?
26:30
Is this supported in all browsers?
26:31
Is this a WASM thing?
26:33
What is the runtime, I guess?
Robin Berjon
26:35
So I mean, this is not a W3C thing.
26:38
But the runtime is like a web runtime.
26:40
So it works in the browser.
26:45
The container itself is not a W3C standard.
26:47
It's a Dazzle standard.
26:49
So I mean, if you want to call Dazzle standards, but it's along the same suite of stuff that powers the rest of 80 Pro.
26:56
Yeah.
26:56
No, this works in a browser today.
Speaker C
26:58
Yeah.
26:59
And the key things here are web tiles are standard.
27:02
The runtime that we're talking about is a thing that loads web tiles and has the message channel for being able to connect to your app.proto account.
Ted Han
27:11
I think there's a lot of room to standardize and create more formality around what runtimes do and don't support.
27:17
And the MASL document is actually— it's simple and plain complementary.
27:24
It does exactly what you'd expect by defining what resources we're using CIDs, Content Addressable Storage references or links, to tell you what it needs to load and how.
27:35
And then it's up to the runtime to implement it.
27:37
So think of it as like the PDS is a collection of XRPC services.
27:41
It's not really a formal spec.
27:43
But you do have a general shape of what it looks like.
27:45
It's very similar.
Robin Berjon
27:47
And also, like, generally, I mean, the way we do specs in Dazzle, we do small specs that do one thing, do it well, and that way you implement what you need to implement for that.
27:56
So like the tile spec is like tiny and it's just tiles, but like the wishes spec is going to be separate from that and like it's only wishes.
28:04
You could do like task-based computing in other contexts, but also, you know, various environments.
28:13
So for instance, I demoed like I demoed like I showed like Roomy integration.
28:17
You could have a chat context integration and like if Rumi integrates it and say I'm making this up, Matrix integrates it, you could use the same tiles in both.
Speaker C
28:27
Yeah.
28:28
So we're like, yeah, 10 minutes, 10 minutes into the 1 minute.
28:31
Yeah, we're now in the bonus round.
28:33
This is the coffee break, so please be free should you want to be.
28:37
Otherwise, if you would like to talk about tiles more, let's go.