dgrstl/web-components-quickstart.md

## web-components-quickstart.md

      
    Raw
  

              web-components-quickstart.md
            
          
    Stoplight Web Components


Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Read more
Usage

Add the following script tag to the head tag of your website.
<head>
  <script async defer src="https://cdn.stoplight.io/assets/bundle.js"></script>
</head>
Components

Hub

Add the Hub component anywhere within the body and include the host and srn attributes.
<stoplight-hub srn="gh/stoplightio/studio-demo" host="https://stoplight.io/api" theme="light"></stoplight-hub>
Optionally, you can control the component's attributes via JavaScript.
const hub = document.querySelector('stoplight-hub');
hub.srn = 'gh/stoplightio/studio-demo/reference/todos/openapi.json/paths/~1todos/get';
hub.theme = 'dark';
Table of Contents

<stoplight-toc srn="gh/stoplightio/studio-demo" host="https://stoplight.io/api"></stoplight-toc>
Page

<stoplight-page
  srn="gh/stoplightio/studio-demo/reference/todos/openapi.json/paths/~1todos/get"
  host="https://stoplight.io/api"
></stoplight-page>
Request Maker

<stoplight-request
  srn="gh/stoplightio/studio-demo/reference/todos/openapi.json/paths/~1todos/get"
  host="https://stoplight.io/api"
></stoplight-request>
Routing

History

By default, routing is handled using the browser's History API. If you are using client side routing, you will need to define a wildcard route to catch all paths rendered by the web component.
<stoplight-hub router="history" srn="gh/stoplightio/studio-demo" host="https://stoplight.io/api" theme="light"></stoplight-hub>
Hash

If you do not have control over the client side routing or if you are routing on the server, the hash router is what you need. It controls the routing using the browser hash.

Warning: This breaks usage of header anchor links

<stoplight-hub router="hash" srn="gh/stoplightio/studio-demo" host="https://stoplight.io/api" theme="light"></stoplight-hub>
Memory

If the previous two option did not work for you or if you just don't care about linking, you can use the memory router. Clicking on links will navigate you to the correct docs, but the URL will not change.
<stoplight-hub router="memory" srn="gh/stoplightio/studio-demo" host="https://stoplight.io/api" theme="light"></stoplight-hub>