Hey Wapplerians!
As we all know, there isn’t a complete tutorial available yet — just bits and pieces covering some functions here and there. So here’s a thought: why don’t we come together and share what we’ve learned?
If there’s a tool or feature you’ve mastered or feel pretty confident with, share your tips! It could really help others who are still figuring things out.
Let’s make learning Wappler easier for everyone, together 
Mark your calendars—Friday, 11th July! That’s when Brian English (a.k.a. @Hyperbytes) may or may not wow us with the Ecosystem for Documentation Transformation 
Edit: Sorry for tossing you into the demo spotlight, Brian... but can you blame me? I'm just a fanboy with zero chill.
Maybe August!
Have already suggested an alternative topic to mark for July (which you have seen)
Sssh, secret
You would think that rewriting all the docs would be a snap with AI!?!?!
Personally, i doubt it but would be very happy to be wrong.
I did have an idea of a community driven docs system replacement with an overall objective to be able to dynamically generate a pdf manual on demand - Wappler for Dummies style.
That was ultimate my vision for my wappler virtual academy site
That would be great. A PDF file would be easy to search.
It is perfectly doable but would require a team of authors to be willing to get involved. Its simply too big a project for an individual
I do think that AI can help in writing docs and guide users, eventually.
Currently we have supplied it with all the knowledge about App Connect and Server Connect frameworks and it is already delivering great results.
Next we will also teach it about Wappler UI so it knows where to find things so it can write guides about it
I would be very happy to contribute.
I did look at this, using the current AI to generate guides.
I felt they were very technical and clinical but i think could be tweaked to add a "more human touch"
Here is an example, i asked for docs on a dynamic collapse:
App Connect provides a powerful way to create dynamic collapsible elements using the dmx-collapse component. These elements can be used to show and hide content dynamically, creating interactive and space-efficient user interfaces.
<div is="dmx-collapse" id="myCollapse">
<!-- Collapsible content goes here -->
<div class="collapse-content">
Your content here
</div>
</div>
<button class="btn btn-primary" dmx-on:click="myCollapse.toggle()">Toggle</button>
<!-- or -->
<button class="btn btn-primary" dmx-on:click="myCollapse.show()">Show</button>
<button class="btn btn-primary" dmx-on:click="myCollapse.hide()">Hide</button>
<button class="btn btn-primary" dmx-on:click="collapse1.toggle()">
Toggle Content
</button>
<div is="dmx-collapse" id="collapse1" class="mt-3">
<div class="card card-body">
This is collapsible content that can be toggled.
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" dmx-on:click="collapse1.toggle()">
Section 1
</button>
</h2>
<div is="dmx-collapse" id="collapse1">
<div class="accordion-body">
Content for section 1
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" dmx-on:click="collapse2.toggle()">
Section 2
</button>
</h2>
<div is="dmx-collapse" id="collapse2">
<div class="accordion-body">
Content for section 2
</div>
</div>
</div>
</div>
<div is="dmx-collapse" id="errorCollapse"
dmx-bind:show="form1.invalid">
<div class="alert alert-danger">
Please fix the form errors
</div>
</div>
<div is="dmx-collapse" id="collapse1"
dmx-on:shown.bs.collapse="app.notify('Content shown!')"
dmx-on:hidden.bs.collapse="app.notify('Content hidden!')">
<!-- content -->
</div>
<div is="dmx-collapse" id="step1">
<div class="card card-body">
Step 1 content
<button class="btn btn-primary"
dmx-on:click="step1.hide();step2.show()">
Next Step
</button>
</div>
</div>
<div is="dmx-collapse" id="step2">
<div class="card card-body">
Step 2 content
</div>
</div>
<div dmx-repeat:item="dataSet">
<button dmx-on:click="collapse{{$index}}.toggle()">
{{item.title}}
</button>
<div is="dmx-collapse" id="collapse{{$index}}">
{{item.content}}
</div>
</div>
<form is="dmx-serverconnect-form" method="post">
<div is="dmx-collapse" id="advancedOptions">
<!-- Advanced form fields -->
</div>
<button type="button"
dmx-on:click="advancedOptions.toggle()">
Show Advanced Options
</button>
</form>
Collapse Not Working
Animation Issues
Content Flash
Remember to always test your collapsible elements across different devices and screen sizes to ensure consistent behavior.
What would be great is lots of very short videos demonstrating each and every feature. But I know that is a mammoth task.
Maybe set a priority whenever anything is either changed or added that a video is created. Similar to the short gifs you include in the Friday emails. Just so we can see how something works or should be used and if there are other things they link in with.
That way the library will begin to expand over time.