Skip to content
/ picori Public

small reactive components defined in your html

License

Notifications You must be signed in to change notification settings

uwu/picori

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

16 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

picori - small reactive components defined in your html

picori is a small frontend framework that allows you to define reactive components by using plain HTML tags, without a build step.

<html>
  <head>
    <!-- Define a component -->
    <template name="my-component" prop="hi">
      <!-- This script runs whenever the component is mounted -->
      <script>
        console.log(prop) // The prop is accessible from the script!

        let boundHTML = prop + " world!"

        // Calling the expose function w/ an object will make that object accessible from the template
        expose ({ boundHTML })
      </script>

      <slot></slot>
      <!-- Template in data from a script -->
      <p-html :="boundHTML"></p-html>
    </template>

    <script type="module" src="https://esm.sh/picori"></script>
  </head>
  <body>
    <!-- You can use the component anywhere in your body now! -->
    <my-component>
      <!-- This gets templated into the <slot></slot> -->
      <h1>picori demo</h1>
    </my-component>
  </body>
</html>

About

small reactive components defined in your html

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published