Supper Club × Raycast with Thomas Mann

So we wanted to also be on the declarative side because if you start learning programming, you're much more likely to to learn declarative clarity of programming, at least on the front end.

So the fact that you made it a,

is 1 on GitHub which calls if you reconcile us out. I think the most prominent one is probably the one that you can use to build command line apps, Which I did not know before as well. So there is something that you can use React to build a command line app, which is pretty cool. So it basically instead of Wow. Rendering CSS and HTML, it just renders text that your terminal understands, But as I mentioned earlier, we don't have any HTML or CSS involved. What we did, we basically build our own React Reconciler, that is what the reconciler is responsible for. So we build our own one, which basically spits out a render tree that Raycast understands, So you can think of our API almost like a design system. So you get a list, The forms, the markdown rendering, those kind of stuff. And this is what people use as building blocks to put the extensions together. And the great thing about that is, like, you have a really good developer

That's really cool.

Yeah. It's wild.

sometimes good, sometimes not so good. So we had to dig into it. I think we got really quickly, like, a proof of concept going and felt like, this actually feels pretty cool. Like, you can just use use state and author hooks, and it's just like, wow. This is This works really well. And then the devil is in the details, so we needed a few iterations to make it really safe and catch all the cases.

The the usual way how most people nowadays program front ends And then you basically have that part, and then it's a lot of moss to get it right,

where we said, hey.

We actually use it like a CLI, which abstracts away everything. So you just run Ray you have the information on your 1 Mac.

I mean, there's plenty of that knowledge out there, so it feels like the new thing. So well, We're not even a new thing. It's around for a while.

experimenting with We have a clipboard history built in. We added window management, which we Felt like it's an obvious thing that everybody needs to install another application, so we mapped that into Raycast.

and have now also TypeScript and React knowledge, which is also pretty cool to see. That's great. Thank you.

out there, so I think The, Everybody went on more and more Zoom calls. We felt like, well, going on a Zoom call is very fragmented. You need to open a calendar, find this damn link, and then open it. So what we did is,

is that, like, the difference of that that's a declarative API. Right? That's the difference between an imperative API? Yeah. Correct. So We we basically started with an imperative API, The functionality,

It's also if people are not familiar with it, there's just, like, a 1000000 websites out there, a 1000000 tutorials

There are few reconcilers And then so there was this understanding. Okay. Cool. We probably should switch to node,

we would get A callback back and say, hey. Something in the list was clicked, for example, executed.

So there is a a saying here. If you're free, like, reconcile a package, I think the types, It makes it handy to to use this tool, is TypeScript, but you can also use it to search files.

It's declarative. Right? We have React. We have Vue. We have Svelte. We have SwiftUI.

you don't need to set up Webpack and other things. It just works out of the box because we know what we compile to.

Raycast came out, and I was like, oh, this is for sure built in, like, web tech, and I I had started digging in. I tried to, like, change the colors. I was like, where's the CSS file? And then I was like, oh, this thing is not. I would just assumed it was. So, like like, why did you build it native?

that you make it available to everybody, which is good Because, like, if you were to, like,

So this is how we balance it, basically. The core of the app isn't highly swift, but then the extension ecosystem having a trace in API is nice, but it's actually quite on the macOS platform with Swift,

Most Windows users,

So we wanted to enable it to as many developers as possible. So there, we opted For JavaScript, So, yeah, we use Escaloid as a database The the building blocks we give you, so with the list and the forms, and and learn this way, React.

to be precise, TypeScript,

to basically guarantee that that many developers as possible can build it.

But sorry to all the Windows users yet.

But, yeah, I mean, like, first of all, like, the team and also both cofounders, we like Apple enthusiasts. Right? So we work, basically, the majority of our professional career in Ios. And then during our time when we worked at Facebook, we actually switched also to work on the Mac. So we were quite familiar with the stack. And so when we started, we were just like, okay. Well, this app is something which is very close to the system. Right? As I described earlier, we use this, I just experienced myself with window management, for example, in particularly, So with to find the search, actually, we rely on, the spotlight index. So what what Mac or Apple does, they basically have this huge index It's a really plain JavaScript.

and make it. I thought it was interesting.

a 100%, but what we then with the extensions API did,

like, we always had Alfred,

React, and Node,

you have built Raycast to be native, which is much to

Yeah. Good good question. So, yeah, there is no CSS or HTML involved. It's all native folks. So it's,

We knew that, well, not everybody wanna write Swift code. Right? which is pretty pretty wild.

I don't think that you're gonna have the biggest ecosystem

And then,

because,

which most developers are familiar with nowadays. Yeah. I thought that was was really interesting that that's the way, App launcher, a calculator, a converter,

disgrace

you can't just simply change the theme there. Sorry.

and get it off the ground, basically. Yeah. It seems like you all have great intuition in that regard because it, as Wes said Early on in the show, it does feel like it's kind of eating

All of that stays locally. So we like what we call a local first step oftentimes.

because you so you recently rolled out,

most of the apps in my my tool chain. So, like, whether I was using with Divi for,

for years because I refuse to pay, but the GUI as well, but I never thought that it doesn't render to HTML and CSS. It renders out to

Scott recommended a really good one the other day, but then you guys rolled it out. And I thought, okay. Like, I I'd like to move over all of my tech designers. So I went digging in the folders,

at text text expansions. And

Maybe. Yeah.

as far as I remember. It's basically a Swift library

Basically, we don't send all of this information to the server, so it stays locally.

But the database itself is is relatively easy to use.

So can you explain

snippets, which I have been for the longest time, has been using TextExpander.

window management, now I I don't have to have that app.

what SQLite is and and what you use it for? Sure. Yeah.

But going back to back to us, so, basically, we use that as a primarily storage. So everything that you have from snippets over clipboard history

on the client and for the ones who don't know. So Escaloid is It's one of the many databases that are available.

and I saw that all of the things are stored in a SQLite database.

I don't know, $6 a month for my So I had another question about this. This is just, like, for people listening that like to understand programming.

or Dean on my y apps.

to the index we have of the applications is stored in this application in this SQLite database.

on iOS and Android and also on desktop apps. Not so sure if it's that familiar on the web. I saw there was 1 project which I found super interesting was where somebody ported

Escalized to the web that they can use it with JavaScript and WebAssembly.

Comes with the downside. At the moment, we don't have synchronization. So if you work on 2 Macs,

So one piece of tech that I found out that you are using,

to installed extensions

was fun. It's actually, it's really good. There's,

a great blog post out actually from Dan about React as a UI runtime, which is

The only difference I mean, basically, we build our own, let's call it, mini React Native. So you also have different intrinsic elements. So you don't have diff, And all of this kind of stuff came basically out of our own inspiration.

but we give you, like, a high level list that you can use with list items.

That is that the engine that's in Safari? That's correct. Yeah. So that's the that's the Apple straightforwardly because the knowledge just transfers very nicely, which I think is also nice when when you bet on a technology that's been around for such a long time.

API

And all of these kind of things that you know from the other JavaScript, And so we wanted to be a part of that as well. And I think, actually, Raycast is an interesting way to learn programming as because we put a lot of love into the developer experience, so Do you do you guys have, like, a Team of designers or designer who's in charge of making those usability decisions there. Yeah. Definitely. Great to hear that it is actually like that because that's one of the goals we have is, like, Having an easy to use app and then giving flexibility as you go forward to really unlock the the power you wanna have as a developer.

bundled basically inside of the Mac, but it's a very closed JavaScript,

And we're picking up this render tree, and then just render what the extension gives to us.

engine. It's based I think WebKit uses it and then, therefore, Safari, and I think it's the only one that is available

to build a out there because you're you're severely limiting it, but I think anybody who is able to sorta get along with a little bit of TypeScript,

And people can use that straight away.

issues.

But then on the UI layer, what we also figured out is, well,

runtime. So there is nothing like fetch network request doesn't have file access, so it's really plain JavaScript, as plain as it can guess, basically.

cumbersome to deal with,

coming from a different angle. Right? So React itself, What we know is, like, this React dom, this renders to the web, but React itself Certain other people might have solved this problem, so there is a ton of, with, like, a platform, like the Apple platform, especially on the Mac, which is very,

And instead of just using JavaScript, is that a difference? I I I have this us, I have another question, but I'll ask you there. Why did you choose React? and people are like, oh, what's the Alfred equivalent on windows, and everybody like, well, there's kinda like this one that's it's, it's okay.

some some OctoKade or whatever and just use that, and that didn't work. Right? Because we our OctoKade runs on on Node and this other stuff, and it's all these compatibility to just enable much more and give what people are familiar with. Right? Because I feel like the best API is something that you already know. You have nothing to learn. You can start from the 1st day.

that that we developed before. That's wild that

and we wanna make it really convenient to deal with, especially when you wanna do something like optimistic updates and get really the last mile, performance out of it. So then we said, okay. Let's let's use React.

and then often came back with the same feedback. It's like, well, I just wanna use my favorite npm module. I just wanna, I don't know, install,

Native, and you had to build your own layer inside of does does React have docs for that type of thing, or did did you have to figure that out?

have still the usability spotlight index, and we search files and apps. All of this core functionality is very core to the system, so you can't really easily go ahead and, like, build a build a electron app or web app and Hook into it. You'd still need to do the extra work to make it really fast. And, well, we wanted to make it incredible fast, so we went down with, like, picking, like, Swift, which we are familiar with as well and and kick that off. And we also wanted to make the app feel very at home at macOS. Right? So we picked the design language that Fits right into the Mac, with the vibrancy and the translucency we picked and around the corner so that it almost feels like it's part of the system. And this was, like, one of the core things we have. So def, and then you basically have your extension up and running in Raycast. And then you can concentrate of just

Guys, okay. Let me start. Yeah. I mean, as everything, it's not something you decide from one day to another. Right? There's, like, an exploration phase with these big bets that you usually do. So So then I Okay. How do you do that? And then I went down into the Apple docs, figuring a few things out there, where we oftentimes

and then you could call an action back. And the JavaScript picks it up, And you basically come communicate back and forth between the JavaScript land and the native land.

is just a plain,

both, like, what it does,

When we when we were confident and we figured out what Raycast is in the UX of it, we thought, like, okay. Let's now build an API, and then we went into an exploration mode. The first thing we actually did was what, Wes, you mentioned, like, just building a JavaScript API. Right? So it was kinda like you're throwing a chasing over the fence, and then the app picks it up, and it's Kinda, like, treat it as a render tree. So whatever is in there, we would render, And then it's I think it has bindings for pretty much every programming language out there. So we have we use GRDB and you have a consistent look across the extensions because that was something which we wanted to guarantee as well. You wanna give flexibility, but with a few constraints to also, where we said, hey. Please render a list. And then,

Why the finder search in macOS

Yeah. And I just I just opened up the store just now, and there's an you know, I really love, like, the trending section of it because it does see, Like, at a glance, like, what what types of things are people are installing? For instance, like, I have a lot of extensions installed for Raycast, but I I didn't know there was a homebrew one, which makes sense. And Now I have a homebrew extension installed. And, like, man, now I don't have to do brew find whatever, and and I could just do it all within Raycast where I do everything else. So, man, Gotta love it. Gotta love this extension star.

using it for many years, but this seems to be,

so many people have have gone out and made it. I remember with with Alfred,

I've just been been very, very happy with It just even it's just simple things like the the file search. I'm sure it's not simple, but

Awesome. Because that probably speaks to the the authoring experience because It's not I never even thought about that because you're using JavaScript and React to render out

to have things like 1 password in there, like Spotify controls.

the experience with this is really, really smooth. No shade to Alfred because I I absolutely loved

And then quite recently or not, That's actually a little bit longer ago. Like, a year ago, we opened up an an API and a store. So, basically, everybody can now build what we call extensions in Raycast, and this basically enables users or developers, in Raycast.

is so awful? Like, I can never find what I'm looking for when I use the finder search,

And the the UI is exactly what I've been missing. Like, the UI is so much more flexible, and,

to Versus Code, that feels very much the same way. We're like, oh, wow. There's so many extensions, a React API where you just write tags for things like, like, when it's clicked, it does this. And

We have pretty much support for everything you can think of, and all of them are open source, which is pretty cool so everybody can jump in and contribute and build their own extensions for their own use or also helping and contributing to other extensions to make it richer every day. Wow.

I had lots and lots of workflows. We had to download them, and there was, like, a third party package manager for it. But then, like, updates were a little tricky, and It used in, like, PHP or Node or whatever language on your machine, and sometimes that didn't work. And,

finder search in in Raycast?

You can search GitHub issues and pull requests.

it it's I think right now, it's Pretty much at a point where it's kinda like Versus Code where if you want it, somebody has made something for it, which is Yeah. I I love that as well because

It's like, well, everybody has those app to do window management. Right? But what I find always hard is I can only remember my Global hot keys to put the window left and right and maybe also maximize it in center. But sometimes I have the situations where I wanna put something top left, top right, And then a But then as always, like, what we do, we work very early on with people from our community together, and they started building extensions and tried out the API, And so this was the decision to go with with Node and NPM ecosystem.

The other angle is open source. Right? There is a ton of open source out there, which is obviously,

or the with this type of app when you're building, like, how are you Getting into the APIs to control macOS,

was, I think, the one of the first extensions,

I mean, all of us usually work on the macro. Right? So you surround yourself with what ecosystem is there, and you see certain other apps doing certain things. And I think one of the things that, what they call that you can learn this kind of stuff, which is really good. Like, we had a few community members. They weren't React,

And then when you work on Raycast, And whatever else comes on. So, Thomas, thank you so much for coming on. Yeah. Thank you for having me. I mean, I've been, Syntax Fitness for a while, so Kinda kinda nice to be behind the scenes now and and putting out my word as well.

Where do you go to understand, like, what's possible essentially in the Mac ecosystem? Is this just kind of like a a,

But the inspiration for a ton of this stuff is just Our own problems that we experience. So clip art history, And if you're familiar with the Mac, you know, spotlight and all threats, so we say, like, it's a spotlight on steroids.

system.

but you maybe figure out, oh, there's just 1 or the other API.

Raycast,

so we don't need this full fledged calendar. So we thought we'd just giving you a glimpse of it. So it's called my schedule where you see what you have today and a little bit of a A heck few of a month. And then, the core thing there is, like, this magic moment when you open Raycast

and and this forms basically, this muscle memory that I have now. I know, for example, When I have a meeting, I just press my global hot key and press return, and I'm straight into the meeting.

one thing which we do or the entire team does basically all the time is solving their own problems. So this was a problem that I had, and I I took the destiny of, like, actually, it would be quite cool to have this window management stuff in Raycast.

that we built. It was just like, well, This is something everybody needs. Let's put it right in.

a bit of understanding It's going to be eating Clippy. Well, where are all the apps that's eating and then l y? Clippy, divvy,

the interesting part of, like, Yep. Going down the rabbit hole. Okay. How can I actually build it? And then sometimes this needs a little bit creativity,

this is fully fully getting into controlling the Operating It's the one stop shop to develop and scale a world class incident management

And then you find this API, and you can go down the threat. Okay. I have this API, and go forward.

quarter. And then I don't know the the hot key, and then it becomes fiddly. Right? And I I really don't like that. So

I don't know. Not that well documented, and sometimes you need to go very deep.

as with the pandemic,

that the team has of, like, what's even possible

and how are you coming up with the inspiration for those types of ideas? Yeah. Definitely. Good Question. So,

and you have an upcoming meeting and trust, so I trust you to join the Zoom meeting or other video calls directly, Another one that we have is is the calendar. So, the app itself is is native, which,

And then when you have the idea, it's basically digging stuff out how to build it. And I think that's always, run times, but making it basically exclusively

and then you can start building those things.

where they're explaining, basically, accessibility APIs that you can use. And with this accessibility APIs, you get information about a window or other windows, basically information about not your application, but other applications.

That interacts with the system quite a bit. Like, for instance, this window management stuff,

And a lot of people nowadays rely on it with the muffled memory, because that's kinda, like, the least we can do when you see an app every day. We wanna have it nice looking.

So design is like a big part of us, and it's quite challenging if you have this small window. It's just very restricted.

with some data to a specific URL. Like, that took no time at all. And

usually comes at a cost of usability. But with Raycast, it doesn't really it always feels super easy to use.

shortcut running

actually, natively, to figure out the APIs and And digging into, okay, how do how do you get that, And and that is a is a game changer, right, because now you have React and node, and we build everything on TypeScript to be type safe from day 1.

they build over time. So you need to be very careful with the design and make it more like a design system, this is how we think about it right now. And I think the what we did early on, we didn't start straight away with a platform and an API to 10 trade cost. Right? What we did is we build the 1st extension ourselves, And, so, basically, this guarantees for us is, like, a really fast database. It's easy to access.

Easy to use as a user. You're not diving into configs for everything, but the power's there. Like, I it It took me no time whatsoever to figure out how to and to get my own,

You still wanna have, like, a little bit of a creation, like, what are cool extensions that people should know about, always a little bit of an interesting thing that maybe people haven't discovered yet, And giving, like, this full experience, I think the closest is probably the the app stores, like, the place around the Ios app store that we've seen there. So, like, People can build something, publish it, and then getting in front of, like, 1,000,000 in decades, which is really cool to see. So, yeah, we wanted to bring all of that in in a productivity app that we use, And, that is what Ray causes nowadays, which we're really happy with.

That kind of power that you get as a developer to do those types of things, We both come from, like, a web web world We're we're primarily building web applications. Right? When you're undertaking something like building

And then you can discover the whole extension ecosystem because I think that's also one of the things which is always when it grows, because everybody is familiar with it, And so, yeah, it's basically digging in open source.

that Allows me to quickly send a post request

to actually experience it. Right? How is it to build those things? What is the UX we wanna have? Can we make a that fits, I don't know, 10 or 20 different extensions that maybe come from completely different angle. And as soon as we knew that, then we basically said, okay. Now let's layer an API on top of that and see how it can make it really easy, which was a super interesting process in itself because, I mean, building an API is always really challenging to nail it, that People understand it Yeah. And like to use it, which is really hard. Yeah. Let let's so let's talk about that. We'll wind back to the stack used to make Raycast, and then we'll talk about the API, which is so, like, you

essentially,

Yeah. It's it solves one of those big Problems were like, it's something that is developer engineer kind of centric without feeling like it is. It feels like it's

We're, like, really product centric in this way.

And so, yeah, we have 2 designers in house. Both of them work on the app as well as on the website. So we really work everything that you see from us is built by us. So and they wanted to contribute. So they just took The time to learn React, which is, like, the simple things you can learn really quickly, and so now they contributed extensions also in the store,

And, like, we've from the get go, we basically said, well, like, we Raycast is an app that you use, I don't know. Dozens, hundreds of time a day, so we really wanna have something that looks pretty, right, as well, And for that, we actually use JavaScript core. So not Node, which is 3 8, but JavaScript core.

that I use it seems to be like, oh, every every 2 weeks. Oh, that that takes care of another a clip clipboard app I used to do, or that use takes care of my Snippets app that I used to use. And,

This

That's correct. Yeah. One of the cofounders of it.

just describe it as a general productivity tool for Mac Pro users. It's a Mac app.

So, yeah, we have Build in the obvious things like searching applications, And then we would recalculate the list and say, please run-in this list now again. And this was really cumbersome with all the state changes that, you will experience in Raycast when you search something and perform actions and wanna update into network requests,

with, I I believe are you the creator of Raycast, Thomas?

is the Syntax supper club.

This episode is sponsored by Fire Hydrant. Fire hydrant helps innovative engineering teams prepare for, respond to, and learn from incidents.

of what Raycast is other than I love it. Can you give us a rundown of of what it is? Well, sure. Yeah. I mean, you didn't describe it too badly. I think Raycast is one of these tools because we can do so many things. It's Really hard to explain sometimes, It became very popular, I think, on clients in general. Like, it's used a lot in mobile clients, putting in first your calendar into Raycast, but the simple few. Right? So I don't have that many meetings or all of us in the team don't have really many meetings, inspiration there as well. They maybe have solved in a different angle, And so we Picked that at the beginning and said, okay. Cool. We picked that, and then we add more functionality to it. So, for example, exposing a fetch method that would then be natively executed

Welcome to Syntax. This is a podcast with the tastiest

eating all of the other applications make the API available in Swift or Python or something like that,

web development treats out there. We got another supper For club for you,

Oh, I'm starving.

so buckle up and grab that old handle because this ride is going to get wild.

Wash those hands, pull up a chair, and secure that feed bag, because it's time to listen to Scott Tolinski and Wes Bos attempt to use human language to converse with and pick the brains of other developers. I thought there was gonna be food,

Scott and I have been big Raycast users for probably a year now.

I sure hope you're hungry.

program. Do you wanna give us I know I gave a bad a bad explanation Can you talk a little bit more about, like, why did you choose React

a I'm gonna call it a productivity app. It's,

happy to move over to it. It's it's just awesome. So we're having him on today to talk about that and

And, as a long time Alfred user, I was very,

One of the cofounders of Raycast, which is, but I feel like I get a much better result. Do you guys did you write your own And I have been on an old version of TextExpander it feels like when I move from Sublime Text

literally everything, and it seems to be for what I don't understand

But, Wes, I also like the Okay. Comparison you did from moving from supply into Versus code, which is actually quite interesting. Never thought about that. But I guess One of the big piece about Versus Code is the ecosystem, right, like, which makes it a And when you then have React, you can basically jump off and and do web development

great editor, which is well, you can use it as a plain text what they can add in more and more things on top of it and just make it a proper ID for, I guess, by now, pretty much every programming language that is out there. And then, yeah, you're defaulting trust to to searching extensions that you find useful, and then they're popping up in in Versus code and and can just install them with one click. And, Well, this was one of the inspirations for our platform as well. It's like we wanted to have, like, really an end to end solution. Right? So Not something fragmented, but something where a developer can sit down, have a great developer experience to build those things. I mean, both of us, cofounders are developers, and We've already developer centric company, so we wanted to build something. Basically, for us, right, we wanted to have fun building those things. And Barely.

Where they indexing every file you have on your Mac, and and basically picking that to have some APIs for that. It's called MD Query. So we're using that, so we're relying on that. But what we did is, like, we wrote our own index for applications because we were relying on Also, the spot that index, it was a little bit buggy here and there and, like, cost issues. So we basically build our own one to be snappy and faster and building on top of that.

And then also didn't want to end with building it. I mean, when you just build something, that's not the Android. You wanna share it. So we basically build a store where you can just publish it. And then when it's published, there's also the consumer side of things. So you can search for stuff. You have the trending section as Scott described where you can find, like, what we create, actually, every Wednesday, like, top 3 extensions that we find really cold the last week.