Flo.w

# Using Flo.w RDF with HTML

The example below shows how to integrate Flo.w RDF with a simple web page. Flo.w RDF is loaded using <script> tags and a pre-packaged/minified version of the library is delivered from the jsDelivr (opens new window) CDN.

The configuration enables on-demand loading of Flo.w RDF web components when they are first used, improving page load times and minimizing download size. Assets such as icon images are served from the CDN.

<!DOCTYPE html>
<html>
  <head>
    <!-- Load core Flo.w RDF styles -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flow-rdf/dist/flow-rdf/css/flow-rdf.bundle.css" />
    <!-- Load Flow RDF web components -->
    <script type="module" src="https://cdn.jsdelivr.net/npm/flow-rdf/dist/flow-rdf/flow-rdf.esm.js"></script>
  </head>
  <body>
    <h1>Using Flo.w RDF with HTML</h1>

    <flow-button id="button" solid color="primary" icon="fas-cog">Hello Flo.w RDF!</flow-button>
    <flow-value value="$message"></flow-value>
    <flow-map map-style="osm-bright"></flow-map>

    <script type="module">
      // Import the Flo.w RDF JavaScript Library
      import { flow } from 'https://cdn.jsdelivr.net/npm/flow-rdf/dist/flow-rdf/index.esm.js';

      // Initialize context
      const context = flow.initializeContext({
        apiKey: 'b6b77cc4-904a-46d1-aa0f-3bf3848ce4c7',
        enableDebug: true
      });

      // Set application state property
      context.state.set('message', 'Hello Flow.RDF!');

      // Attach button click handler
      document.getElementById('button').addEventListener('click', () => {
        context.state.set('message', 'Clicked!');
      });
    </script>
  </body>
</html>

← Webpack →