I’ve been looking into different Javascript frontends to see if they made my development life easier. I’ve been looking specifically to see if they improve on some Stimulus sprinkles and server rendered HTML. One interesting example was converting a text area from markdown to html. It uses marked to perform the conversion, and it uses Continue reading “Build a Markdown Editor in Stimulus.js like in Vue.js”

Stimulus.js allows for a myriad of ways to store state about our webapp. One thing to always keep in mind is that Stimulus.js wants to enhance existing HTML instead of control all of the page’s DOM, so we will need to think of ways that leverage server generated HTML to manage our state and progressively Continue reading “Where do I store my state in Stimulus.js?”

If you have a lot of records that fall into many different buckets, it can be hard to filter all of that complex data record. Thankfully, we can string together a couple select fields to filter based on multiple, disparate categories. This might be like something you’d see on a car shopping website, where you Continue reading “Stimulus.js Tutorial – Multiple Selects that Filter Enterprise Data Models”

I’ve been working on an app that uses Trix to edit a very complicated book text. Someone asked if I could add the ability to choose different sizes of text while they are editing the book. After digging around online, I came across this example from Javan, one of Trix’s creators: https://codepen.io/javan/pen/EPqzZo. This was exactly Continue reading “Let’s create a Trix Editor plugin using Stimulus.js”

You may shudder remembering that long form you were once filling out, only to accidentally click a link, or refresh the page. You lost everything, all your unsaved form entries, and then you had to redo your work and fill out the form again. Don’t let your customers fall into the same trap. There are Continue reading “Stimulus.js Tutorial – Don’t Lose Unsaved Form Fields”

Let’s say your building a really fancy UI, and you don’t want to use plain old radio buttons in your form. You might have a list of items, and you’d like your customer to select one of them. You also don’t want them to submit the form without selecting an item. Here’s an example of Continue reading “Stimulus.js Tutorial: Implementing Radio Selection In A Form”

Stimulus excels at adding sprinkles of interactivity to your web apps. Let’s say you want to make an element on your page editable, like a todo entry, or a title for your blog page. We can use a Stimulus controller that will listen for a double click event, insert an input tag that looks just Continue reading “Let’s Make an Editable Header using Stimulus.js”