<- back

Guide

Below you'll find examples using htmx but you can use mock-html with any other library.

mock-html simply serves HTML fragments from our server upon request.

Jump to:

• GET Request
• POST Request
• PUT Request
• DELETE Request
• Adding classes
• Your own HTML

Getting a resource

            
                <!-- 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>
            
          

Posting a resource

            
                <!-- 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> 
            
          

PUT Request

              
                <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
              
            

Delete Request

                
                  <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
                
              

Adding classes

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>
                
              

Your own data

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>