buildHtml
baseUrl https://apiscroll.pub
metaTags
editButton /edit.html
title API Scroll | Test & Debug APIs
style.css

header
 class hero
 nav
  div API Scroll
   class logo
  div
   class nav-links
   a Docs
    href #docs
   a Examples
    href #examples
   a Edit
    href edit.html
 div
  class hero-content
  h1 Test APIs with Elegance
  p Send, receive, and debug API calls with this beautiful interface
  a Try It Now
   class primary-button
   href #tester
main
 section
  id tester
  class api-tester
  h2 API Tester
  div
   class tester-container
   div
    class request-panel
    div
     class method-selector
     select
      id method
      option GET
      option POST
      option PUT
      option DELETE
      option PATCH
    input
     id url
     class url-input
     placeholder https://api.example.com/endpoint
    div
     class headers-section
     h3 Headers
     div
      class headers-container
      id headers
     button
      class add-header
      id addHeader
      + Add Header
    div
     class body-section
     h3 Body
     textarea
      id requestBody
      placeholder {"key": "value"}
   div
    class response-panel
    div
     class status-bar
     span Status:
     span
      id statusCode
      class status-code
     span
      id statusText
    div
     class response-tabs
     button
      class tab-active
      id responseTab
      Response
     button
      class tab
      id headersTab
      Headers
    pre
     id responseContent
     class response-content
    button
     class send-button
     id sendRequest
     Send Request
 section
  id docs
  class docs
  h2 Documentation
  div
   class docs-grid
   div
    class docs-card
    h3 Getting Started
    p Enter your API endpoint URL, select the HTTP method, add any required headers, and include a request body if needed.
   div
    class docs-card
    h3 Headers
    p Add custom headers by clicking the "+ Add Header" button. Each header consists of a key-value pair.
   div
    class docs-card
    h3 Response
    p View the API response in either the formatted response view or the raw headers view.
 section
  id examples
  class examples
  h2 Example APIs
  div
   class examples-grid
   div
    class example-card
    h3 JSONPlaceholder
    p GET https://jsonplaceholder.typicode.com/posts/1
    button
     class example-button
     data-url https://jsonplaceholder.typicode.com/posts/1
     data-method GET
     Try It
   div
    class example-card
    h3 OpenWeatherMap
    p GET https://api.openweathermap.org/data/2.5/weather?q=London
    button
     class example-button
     data-url https://api.openweathermap.org/data/2.5/weather?q=London
     data-method GET
     Try It
   div
    class example-card
    h3 GitHub API
    p GET https://api.github.com/users/octocat
    button
     class example-button
     data-url https://api.github.com/users/octocat
     data-method GET
     Try It
footer
 div
  class footer-content
  div
   class footer-links
   a Documentation
    href #docs
   a Examples
    href #examples
   a Edit
    href edit.html
  p A beautiful way to test APIs

script.js