Definition of Hypermedia
Hypermedia refers to media (text, images, video) that includes links to other media. It not only enables navigation but also embeds possible actions and state transitions within responses, such as forms and controls in HTML.
Hypermedia and REST Architecture
REST (Representational State Transfer), defined by Roy Fielding, includes hypermedia as a core constraint (HATEOAS). In this model, server responses provide both data and available actions based on the current application state.
Limitations of JSON-Only APIs
Returning plain JSON data without action controls does not fulfill true REST principles. A proper hypermedia response includes links or forms that guide the client on what actions are possible next, depending on the resource state.
Rise of Single-Page Applications (SPAs)
Frameworks like React, Angular, and Vue emerged to deliver more interactive, app-like browser experiences. This shift moved logic to the client and popularized reusable JSON APIs across web and mobile platforms.
Complexity Introduced by SPAs
SPAs require maintaining state on both client and server, increasing architectural complexity. Tight API contracts between frontend and backend make changes risky and reduce simplicity and maintainability.
Advantages of Hypermedia-Driven Applications
Hypermedia keeps logic centralized on the server, simplifying reasoning about system behavior. It reduces duplication, avoids complex client-side state management, and maintains a tighter coupling between controllers and rendered pages.
Modern Hypermedia Renaissance
New tools such as htmx, Datastar, Livewire, and Hotwire extend HTML capabilities to support interactive experiences without abandoning the hypermedia model. These tools enable responsive applications while preserving server-driven simplicity.
Architectural Shift Back to Server Control
Modern hypermedia approaches place the server in control of state and behavior. This simplifies validation, reduces duplication, and allows developers to build interactive applications with less overall complexity.
So what is hypermedia? Well, hypermedia is any type of media like text, image, video that contains links to other media. So when you click a link on a page and you navigate to another page, you're using hypermedia. The HT in HTML stands for hybrid text.
Harmedia isn't only about clicking links, it's also about encoding actions or possible actions and state transitions of an application to our response from your server or my server or the server we are interacting with. So whenever we load a web page, the HTML doesn't just contain data, it also contains some controls of
or for what you can do next, like the forms we have been creating. It tells you something about what type of data you can send to the server. It also links to where you can navigate around. The application state and the controls for changing the states are all embedded into hypermedia. This is tightly coupled to REST, and you might have heard about REST before. It stands for Representational State
transfer, and it was defined by Roy Fielding in his dissertation back in the 2000s. The thing that most people miss is that REST isn't just about HTTP verbs like get, post, put, and all of these kind of things, and having like nice URLs. One of the core elements of REST is this thing called heydoers. I can pronounce it, but it's
hypermedia as the Indian of application state. This basically means that clients interact with your or my application through hypermedia, and the server will not only provide the data, but also the controls for what action are available in the current state of the delivered page. So for example, if we have an API, a bank API, we can return some JSON data,
where it states like the balance, maybe transactions, and if the account is active or not. This is not a true bestful hypermedia API because something like that will return a markup where we can see the data, but also we can interact with the data or with the thing in front of us, with the page in front of us. We might be able to withdraw or we might be able to view account details.
So hypermedia responses doesn't just tell you about the state. It also tells you what you can do next if the account was in negative, it didn't have any more money. Maybe the form to maybe withdraw money would be there or it would have some link to go and deposit more money, right? So the available action changes based on the application state.
So why are everyone using single-page applications today? Well, around the 2010s, we started to want more interactive and mobile-like experiences in the browser. A lot of the app market has taken off, and people were expecting this native mobile app feel in the browser as well. So we got frameworks like Angular, we got React, we got View.
that all promised to solve this clunkiness of the traditional web by moving a lot of the logic to the client or the browser. We also started to reuse our APIs for mobile apps and a lot of that was JSON. So we didn't really stick with this HTML API when we could just have JSON APIs because we could encode
We could have more generic and we use a built-in generic responses that could be reused across different screens and pages. Also, the tooling wasn't really there. We haven't seen any proper updates to the HTML spec in a long time that would allow us to do what we would expect of a modern application. But this shift to single-page application also brought in a lot of
problems. And one of the biggest ones, especially for me personally, is that we have to maintain state on the client and on the server now. I worked professionally for many years with React and JSON APIs. And at one point it was just, it got too complex to do the symbols thing. So I started to move away from this approach to do more hypermedia driven applications, because they are simpler and they can stay simple for very long time, much longer than people
suspect they can without needing something like React or View or Angular, because they are great tools, but they are great tools for a specific purpose. Because adopting these tools means that we also lose simplicity. Now we need to know a bunch of different tools at one point, React, TypeScript, Webpack. We need to know this at a deep level just to do something like create, read, and update the delete type apps.
Frontend and backend are now, they tied the couple through these API contracts, which makes the changes to APIs really risky. It's really easy to break certain elements. We also lost this feedback loop that if you make a change to the backend, then you'd merely see it in the frontend. You don't really necessarily know where the API is used, so we need to know
ahead of time, all the places that our APIs are used. So we make sure that we don't break anything in any pages since maybe one client expects a certain version of the API and another expects something else. And if we change a field or add a field, remove a field, then it breaks in different places that we wasn't necessarily aware of. So we lose a lot.
of simplicity and we bring in a lot of complexity, which is sometimes needed, but for most applications it's not. We can go very far with modern hypermedia and it's important to remember that we are not Facebook, we are not Google, we are not these big, big tech platforms that has the engineers to deal with these kind of tools. You can definitely learn them and they will seem very simple on the surface in the beginning, but as you progress into the application,
start to see how the complexity just explodes once you start to build, let's say, quote unquote, a real application in a way that you don't see if we take this more modern, modern hypermedia approach where we are tightly coupled between the controller and the page that it serves. Logically, we are starting to see hypermedia renaissance, renaissance.
And there's coming a bunch of new libraries. The ones we are going to be looking at is something called SDMX. And data started extending the capabilities of SDML. So we can build which and interactive experiences without abandoning this hypermedia model. There's also something like LiveWire, I believe, in Laravel. There's something like HotWire in Rails. So more bigger frameworks is also starting to adopt
these approaches. And these tools let us keep the logic on the server very easier and more secure to maintain because if we were to build our, let's say our create article form using something like React, we will probably do some validation on the front end to show errors and show visual feedback to the user if something is wrong, but we'll also need to again validate this data on
the back end. And right now we are basically just doing it on the back end and providing feedback. The way we do it is a little bit clunky, but this is where Datastar and HMX come into the picture because we can do this in one place and with the same field that you will have from a single page application. So adopting these tools allow us to provide this smooth and responsive experience that users has come to expect in the last
10 or so years. So that is hypermedia. It's not just linking between documents as was the original purpose. It's a complete architectural approach where we have the server be in the driving seat instead of the client. And we also have more, we are more aware of what happens. It becomes simpler. We can more logically reason about what a change will cause or will
what changing something in the back end will affect the front end because we have a tight coupling between the two elements. So let's start to dig into these modern tools and see what we can actually do with our blog using these type of tools.
