- Your code here builds on the foundation listed below, and will be injected into a <div id="container"> element in the body.
-
- + +
+
+
@@ -59,13 +59,73 @@ examples: + +
+ You can generate interfaces or features easily using AI. Diffuse provides a skill to use with LLMs. Claude usage example: +
+ ++ Download skill +
++ Open up skills screen (Customise tab in sidebar) +
++ + + Create skill + + Upload skill + +
++ Select downloaded zip file +
++ Try in chat and follow directions +
+
+ Facets will be injected into a <div id="container"> element in the body.
+
+ While you have the ability to do whatever you want in a custom facet, the existing facets are designed to work a certain way; so here's some things to keep in mind: +
+- Diffuse comes with a foundation that preconfigures a lot of elements so you don't have to set them up yourself, along with a combination of elements for certain features. It internally tracks the DOM addition of the custom elements, so no need to worry about setting up an element multiple times. It also provides signals which can be used to track element creations. An example of this can be found in the "scrobbles" feature. + Diffuse comes with a foundation that preconfigures a lot of the built-in Diffuse web components so you don't have to set them up yourself, along with a combination of components for certain features. It internally tracks the DOM addition of the custom elements, so no need to worry about setting up an element multiple times. It also provides signals which can be used to track element creations. An example of this can be found in the "scrobbles" feature.
That said, you are not required not use this! You can, for example, setup a Diffuse audio engine element yourself that's in a different group so that it doesn't communicate with the default one; in case you want to make a dj-deck, or something like that, which would have multiple audio items playing at the same time. This does mean you will need to pay attention to more things, such as, how does this interact with other features the user has enabled. @@ -107,19 +167,9 @@ examples:
- Some simple examples to help you understand how to build your own facet. Click the edit button to load them into the code editor above. + Some simple examples to help you understand how to write your own facet. Click the edit button to load them into the code editor above.
{{ await comp.examples({ id: "examples", items: examples }) }} - -- While you have the ability to do whatever you want in a custom facet, the existing facets are designed to work a certain way; so here's some things to keep in mind: -
-- Diffuse was built using these web components, consume these using the code tool, the Javascript package, or the linked Javascript files down below. + Diffuse was built using these web components, consume these using the create tool, the Javascript package, or the linked Javascript files down below.