mock-html is a web server powered by Django and htmx that provides mock HTML responses for experimenting with htmx or other hypermedia libraries. It allows you to simulate server responses and test client-side rendering without the need for a real backend.
If you are hacking a prototype or following a tutorial with a hypermedia library (htmx and similar), you have to spin up a web server just to see something.
I didn't like the friction and the time it needed just to explain how it works to a new developer who is used to working with JSON. I spent more time getting a web server up than actually explaining things (htmx is dead-simple!).
This mock-html server simply returns html fragments as you request them. Hit the server with /tag/{html tag name} - and you get mock html fragments back. You can add custom classes as well. It will also mock POST/PUT/DELETE for you.
Also - this works well if you want to use your own custom html fragment. Just make a public github gist and hit the server with the gist id. You can totally use this in all kinds of crazy ways.
You can find it running here and are free to use it in your developments: https://html-mock.fly.dev/.
I hope you will find it useful.
If you want to spin up your own server, clone the repo and python manage.py runserver. As always, don't forget to manage your python environments. Also, you will need a db.sqlite3 as tags are stored there for ease of development.
Otherwise, simply make requests to the server at https://html-mock.fly.dev/ and you will get html back.
<!-- adjust htmx attributes for your own needs -->
<button
hx-get="https://html-mock.fly.dev/tag/table"
hx-target="#results"
hx-swap="innerHTML"
hx-trigger="click"
> Get Table </button>
👇 Output
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
<!-- make sure you fill out other htmx attributes as needed -->
<form hx-post="https://html-mock.fly.dev/tag/paragraph">
<label for="name">Name:</label>
<input type="text" id="name" name="name" value="foo">
<input type="submit" value="Submit">
</form>
👇 Output
<p> <span> You Posted the following values: foo </span> Lorem Ipsum </p>
<button hx-put="https://html-mock.fly.dev/tag/paragraph">
Put Money In Your Account
</button>
👇 Output
<!-- You will always get the same response regardless of put parameters or endpoint -->
Put Request Received
<button hx-delete="https://html-mock.fly.dev/tag/paragraph">
Delete your account
</button>
👇 Output
<!-- You will always get the same response regardless of put parameters or endpoint -->
Delete Request Received
Simply add the class attribute to the url as a parameter. You can add as many classes as you want, just make sure they are url encoded correctly.
<button hx-get="https://html-mock.fly.dev/tag/paragraph?class=bg-dark%20text-white%20p-3">
Get Paragraph
</button>
👇 Output
<p class="bg-dark text-white p-3"> Lorem Ipsum </p>
You can return back any kind of HTML fragments you wish. Just make a github gist then make a request to our server with the gist id as a parameter.
<button hx-get="https://html-mock.fly.dev/gist/c9fd72b8f8a265d8bfcdb4338ffc76fa">
Get Custom HTML
</button>
👇 Output
<p> Hello, World </p>
Contributions to the mock-html project are welcome! If you find any issues or have suggestions for improvement, please feel free to open an issue or submit a pull request.
The MockHTML Server project is open-source and available under the MIT License.