Swiss .js

A tiny JavaScript utility

Use Swiss.js to instantly add interactivity using simple HTML attributes. Perfect for static sites, CMS templates, prototypes, and Webflow/Framer custom code.

Examples
Installation
Rationale

UI Examples

  • Item 1
    Some kind of menu...
  • Item 2
    Some kind of menu...
  • Item 3
    Some kind of menu...
  • Item 1
    Some kind of menu...
  • Item 2
    Some kind of menu...
  • Item 3
    Some kind of menu...
Logo
Some kind of menu...

Class Management

Click
Hover
Click
#target-1
Hover
#target-2
Click
Target
Target
Target
Click
Target
Target
Target

Viewport Binding + State Reset

Click
Click
Click

Events + Run Inline JS

                        
                          <!-- Dispatch a custom event -->

                          <button data-swiss="event(myCustomEvent)">
                            Dispatch custom event
                          </button>

                          <script>
                            document.addEventListener('myCustomEvent', () => {
                              alert('”myCustomEvent” triggered by Swiss.js!')
                            });
                          </script>

Data Attributes

Target Element

(watch attributes change in DevTools)

Enter/Exit

Enter
Exit
Enter + Exit
Enter + Exit

Script Tag

                  
                    <html>
                      <body>
                        <!-- insert Swiss.js before closing body tag - and you're good to go! -->
                        <script src="https://cdn.jsdelivr.net/gh/pjrundle/swiss.js/dist/swiss.umd.js"></script>
                      </body>
                    </html>

Rationale