In this episode, we're hooking up the markdown preview feature for our form. We'll work through fetching the rendered HTML for markdown from the backend and displaying it live as the user types.
Here's the gist of what we do:
- We start by watching when the markdown preview is toggled on. When that happens, we send a request to the backend to get the HTML for the markdown they're typing.
- We create a new controller (
MarkdownPreviewController
) to handle the conversion of markdown to HTML, route it up as a POST route, and ensure it's accepting the markdown body from the frontend.
- Instead of using Inertia for this little preview interaction, we use Axios directly (which is already set up when using Laravel Breeze), making our lives a lot easier for just this API-like preview.
- To make sure our preview gets the body content, we pass our form object down as a prop to the wrapper component.
- We test out sending markdown to the backend, previewing it, and fix up the flow so that when you switch on preview, the HTML is sent back and displayed exactly as it'll look once posted.
- To polish things up, we add a simple 'loading' experience — toggling an opacity change while we're waiting for the backend to respond. (You could add a spinner or something fancier if you like!)
By the end of the episode, you’ll have a working markdown preview toggle, with live updates, backend rendering, and UI feedback on loading — everything you need to make previewing your formatted text smooth and user-friendly!