My favorite way to author content in Astro

My favorite way to write hands down is IIA Writer. It's built for markdown. [music] It's elegant. The UI touches are just best of the best. Well, now for the last several weeks, I've been writing with something called Astro [music] Editor. And it borrows a lot of the design language and the same choices as what IIA Writer has. And today, I want to show it to you. Hey, what's up? My name is Chris and welcome to Coding in Public. All right, so this Astro editor, as far as I know, is built by a single developer who just really likes Astro and really likes IIA writer. Seems like a best friend, you know. Um, you can just brew install cast Astro editor and get all this stuff for free. In fact, he has a whole video tutorial walking you through this. And again, I just love the details he's put into it. Now, there are obviously a couple things I'd like to see improved, but as far as I know, he's building this by himself and probably just is going to build features that benefit him right now. But if we can get some more steam behind this and perhaps even fund him some, I'd love to see some more things come along. But this is the kind of developer I love. These kind of indie single developers who just make stuff happen for themselves and we get to benefit from it. All right, so down this way you can see we've got a bunch of things like focus mode here. We can turn on focus mode to just look at the sentence you're currently on. You've also got editing, copy, edit, highlighting for like nouns and adverbs and adjectives to kind of see how you're writing. That can be really helpful for analysis. You can embed MDX components. I'll show you how to do that in a second. You also get all these little filter props which are super nice. Some things I'd like to improve there, but we'll talk about that. Dark mode and light mode, smart image fields. You can actually hover if you hold down option or alt and see the images as you're hovering through them. But the whole point is writing, right? That's what you're trying to do in these MDX files. And if I jump over here, you can see that it's uh schema front matter. You've got smart image handling. You've got writer mode, not coder mode, which I think is such an important distinction if you're really a writer. Um autosaving MDX insertion like we already looked at. We haven't seen the command pallet, but that's super cool and I think fairly new. I didn't see it originally. Um, but you can also navigate deep hierer like hierarchies as well and a bunch of other things. All right, so let's actually see how it works. You just open up the uh the project, you write, and that's it. And you stay in your workflow. IDE is for coding. Astro editor is for writing markdown. All right, so what does it look like this? All right, you can do command shift O and open any project. Here I've just opened up my blog project and you can see it's auto detected all these items. I can even filter by drafts only to see things I still need to write. It supports markdown and MDX right now. And here I've got an image and like I mentioned, you can hold down the option key and it will actually show you a preview. Now, it happens to be the same as here. So, not super helpful, but if you really want to go focused, do command one, command two, hide all of that and then go straight into focus mode. Now, to show you that, let me come into the command palette and you can do it that way. There's also like a shortcut as well and you can do it up here or use a keyboard shortcut. And again, you can just stay super focused on whatever sentence you happen to be writing at that time. Now, I writer, when you go in focus mode, scrolls so that it's always in the center of your screen. That's one little nice thing I'd love to see added. But again, I can't complain with somebody who's built me a free app that's way better than what I could do, but exactly the kind of app feature set that I would love. All right. Again, you got markdown. You've got all this like smart detection of the type it is over here. Titles, descriptions, pub dates, all that kind of stuff. Smart uh detection of like where you want your assets. And some of this you can change as well like in the collection or let's see project setting like here's where my content is. Here's where my assets are. And again it tries to find all of this. You can say here's where you can find my components. Now by default it's in this MDX folder. You can actually say hey it's right here as well. And that will work as well. If I come over here um to actually insert those you do command and for slash and you can see all the different components you have. Like I said, by default, it puts these things in an MDX directory, but you can change that around as well if you want to. So, MDX directory, I only have two there. I've got like a counter, and you can see that you can add different props here, the initial, and then I can say like, well, let's do client visible, and then just insert it with command and enter. Now, one thing I'd love to see change is this puts this as a string, whereas it needs to be an actual number because that's the type it is. So, little details there that I would love to see fixed, but again, I can't really complain with what is honestly just such a brilliant and beautiful app. Um, now the other thing it doesn't do is it doesn't actually import it, which is kind of important to actually make it work. So, I'm curious on like yeah, when some of these changes will be coming, but here this happens to be an MDX and then it's counter and in this case it's tsx, which I don't remember if I need to actually include that extension offhand either. Come back over here. Let's actually look at this blog. And here it is. I can go ahead and click right through this and again it's been hydrated and all this has happened in a nice friendly markdown editor as well. Now there are other things I can add as well. You might remember I had one more that was an Astro component. So I've got React or I can embed Astro components as well. You've got an author a quote. Both of those are required so they're pre-selected but I can also include a link if I want to. Let's say the author is like me and the quote is like I don't know Astro editor is awesome. All right like that. And then if I jump back over this way again, it doesn't actually import it. So you have to add that manually. And then call out. Aastro. All right. So back over this way now, it should actually show down here here. Yep, there it is. Astro editor is awesome by myself. All right, so Astro components, I think Vue and React as well. You obviously have to have those uh different renderers installed. And I've got the React render installed here as well. Let's see what else do I want to show you. Um smart um hero like images like these images here. You can just smartly add them. Again, you saw that hopefully in the actual settings for the project. There's also light mode uh quick trigger warning. Oh, there you go. There's light mode uh or dark mode. And there's not a lot of customization there. Um but here it's really just the focused writing experience that's just so brilliant. And again, you get all the nice like hovering effects for images. You get uh nice helps when it comes to like bolding stuff. Everything like that works as you'd expect. Uh let's see. You can also do links as well. And just command K will add that. Um, lots of little nice touches and it borrows again that design language uh from IIA Writer as well. Well, I hope Astro [music] Editor looks as interesting to you as it did to me. I think you'll find a lot of great use out of it. The developer seems super on top of it. He's always adding new features. Has a great video on the actual landing page as well and lots of docs as well on GitHub. So, check it out and let me know what you think. All right, thanks. I'll catch you in the next one. Happy coding.