Dev Diary Ep15 - Huge New Feature Revealed - Custom Elements

[dan (Dan C.)]

Hey Weavers,

We have a HUGE new feature to share with you all today…

We’re introducing the ability to create Custom Elements right inside of RapidWeaver!

We think this new feature is going to be an absolute game-changer for the future of Elements. In today’s Dev Diary I show you how anyone can build their own Elements, including a customisable subscription form and a dynamic data driven list Element!

Watch the video below to learn more about how users and developers will be able to take advantage of this powerful new feature.

Dev Diary Ep15 - Huge New Feature Revealed - Custom Elements!

A little more about Custom Elements

Building a custom Element gives you access to the entire Elements Language, and all global properties within a project (e.g. pages, url’s, names, icons, etc…). In fact, you get access to everything we used to create all the built-in Elements you’ve seen in previous demos.

We know this new feature is going to be huge once everyone has had a chance to play around with it and see how easy it is to create their own custom Elements — The possibilities are truly endless.

P.S. Don’t worry if this feature is too technical for you to get excited about, we’ll be demoing another new feature in the coming weeks that’s also jaw droppingly good

As always. your feedback is invaluable to us, so let us know what you think of today’s announcement in the comments below.

I’ll be back next Tuesday as usual.

Cheers,
Dan & Team Realmac

[Flash]

One great feature after another! You guys are killing it!

[bryanrieger]

Ooh, this is !
If this is the tip of the iceberg, I can’t wait to see what’s coming.

I do have a few of questions.

1. There’s a lot of lightning bolts, I assume you can add your own element icons?
2. In the element editor, I don’t see anything for related scripts? Will it be possible to add scripts to elements?
3. Is it possible to create elements that don’t use Tailwind, but still provide properties (colours, etc) to be edited via the property editor?
4. Will the editor provide auto-complete for the Elements language?

Looking forward to tucking into the Elements language when the docs are available.

[upssjw (Steve W)]

@dan excellent, shaping up to be a great product
Really interested in the html side, as previous I am still practising tailwind while we wait, getting better I think
I wrote this code in play tailwind play https://play.tailwindcss.com

just delete and write or paste (if you adjust the page size other than from the middle it stops the animations but still works, this doesn’t happen when I pasted into vscode and published
would be good to see if you can just paste into Elements, quite a lot going on
Responsive bento grid - should be a good test for the html Element and help my learning curve check I am on the right track

<br>
  <br>

  
 
  </div>
  </div>

  <div class="z-10 text-center py-6 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500  sticky top-0 text-white shadow-xl font-bold  text-xl mb-8">Responsive at mobile sm md - hover effects<div class="fixed top-0 ">
    
  <div class=" bg-blue-500  w-36 sm:hidden z-30"> 
    <p>Mobile View</p>
  </div>
  
  <div class="bg-blue-500 w-36  hidden sm:block md:hidden z-30"> 
    <p>SM View 640</p>
  </div>  
  <div class="bg-blue-500 w-36  hidden md:block lg:hidden z-30"> 
    <p>MD View 768</p>
  </div>
  
  <div class="bg-blue-500 w-36  hidden lg:block xl:hidden z-30"> 
    <p>LG View 1024</p>
  </div>
  
  <div class="bg-blue-500 w-36  hidden xl:block z-30"> 
    <p>XL View 1280</p>
  </div>
</div></div>
  

  <div class="grid grid-cols-2  grid-rows-5 sm:grid-cols-3 sm:grid-rows-4 md:grid-cols-4 md:grid-rows-3 gap-4 mx-auto w-[90%] sm:w-[85%] md:w-[85%] ">
 
 
     <div class="hover:animate-pulse py-4 content-center text-red-500 text-center shadow-xl border-2 border-black   bg-pink-300 col-span-2 sm:col-span-2 sm:row-start-1 md:col-span-2">1 Red<div><br></div>
     <div class="mx-auto h-12 w-12 rounded-2xl animate-spin bg-red-500"></div>
   </div>
    
    <div class="hover:animate-spin py-4 content-center text-blue-500 text-center shadow-xl border-2 border-black  bg-orange-300 row-start-2 sm:col-start-3 md:col-start-1 md:row-start-2">2 Blue<div><br></div>
     <div class="mx-auto h-12 w-12 rounded-2xl animate-spin bg-blue-500"></div>
   </div>
    
     <div class="hover:animate-bounce py-4 content-center text-purple-500 text-center shadow-xl border-2 border-black  bg-yellow-300 row-start-2 sm:col-start-3 sm:row-start-1 md:col-start-1 md:row-start-3   ">3 Purple<div><br></div>
     <div class="mx-auto h-12 w-12 rounded-2xl animate-spin bg-purple-500"></div>
   </div>
    
     <div class="hover:animate-ping duration-300 py-4 content-center text-slate-500 text-center shadow-xl border-2 border-black  bg-purple-300 row-span-2 sm:row-span-2 sm:col-start-3 sm:row-start-3 md:row-span-2 md:col-start-2 md:row-start-2 ">4 Slate<div><br></div>
     <div class="mx-auto h-12 w-12 rounded-2xl animate-spin bg-slate-500"></div>
   </div>
    
     <div class="hover:scale-110 transition-transform duration-300 py-4 content-center text-red-500 text-center shadow-xl border-2 border-black    bg-blue-300 row-span-2 row-start-3 sm:row-span-2 sm:col-span-2 sm:row-start-2 md:col-span-2 md:row-span-2 md:col-start-3 md:row-start-1     ">5 Pink<div><br></div>
     <div class="mx-auto h-12 w-12 rounded-2xl animate-spin bg-pink-500"></div>
   </div>
     
     <div class="hover:scale-50 transition-transform duration-300 py-4 content-center text-orange-500 text-center shadow-xl border-2 border-black   bg-slate-300 col-span-2 row-start-5 sm:col-span-2 sm:row-start-4  md:col-span-2 md:col-start-3 md:row-start-3">6 Orange<div><br></div>
     <div class="mx-auto h-12 w-12 rounded-2xl animate-spin bg-orange-500"></div>
   </div>
 </div>
 <br>
 <br>  
<br><div class="mx-auto grid w-[50%] grid-cols-1 grid-rows-9 gap-4 p-4 sm:w-[85%] md:w-[95%] sm:grid-cols-5 sm:grid-rows-5">
    <div class="shadow-xl border-2 border-yellow-500  content-center bg-blue-300  text-yellow-100 text-center sm:col-span-2 sm:row-span-2">Blue<div><br></div>
      <div class="mx-auto h-12 w-12 rounded-2xl animate-spin bg-yellow-300"></div>
    </div>
  
    <div class="shadow-xl border-2 border-purple-500 text-purple-500 row-span-3 content-center bg-red-300 p-4 sm:col-span-2 text-center sm:col-start-3 sm:row-span-5">Pink<div><br></div>
      <div class="mx-auto h-12 w-12 rounded-xl animate-spin bg-purple-500"></div>
    </div>
  
    <div class="shadow-xl row-start-5 text-pink-500 text-center border-2 border-pink-500 content-center bg-orange-300 p-4 sm:col-start-5 sm:row-span-2 sm:row-start-4">Orange<div><br></div>
      <div class="mx-auto h-12 w-12 rounded-sm animate-spin bg-pink-500"></div>
    </div>
  
    <div class="border-2 border-blue-500 text-blue-500 text-center shadow-xl row-span-2 row-start-6 content-center bg-purple-300 p-4 sm:col-start-5 sm:row-span-3 sm:row-start-1">Purple<div><br></div>
      <div class="mx-auto h-12 w-12 rounded-lg animate-spin bg-blue-500"></div>
    </div>
  
    <div class="shadow-xl border-2 border-red-500 text-red-500 text-center row-span-2 row-start-8 content-center bg-slate-300 p-4 sm:col-span-2 sm:col-start-1 sm:row-span-3 sm:row-start-3">Slate<div><br></div>
      <div class="mx-auto h-12 w-12 animate-spin bg-red-600"></div>
    </div>
  </div>
  <br>
  <br>
  <br>  
  <br><br>

the screen widths pixels to work properly requires the config tab to be over written with

/** @type {import('tailwindcss').Config} */
export default {
  theme: {

    screens: {
      'sm': '640px',
       'md': '768px',
        'lg': '1024px',
         'xl': '1280px',
    
    },
  },
  plugins: [],
}

you can see some changes once edited in vscode and published

https://sjwjaw.co.uk

[ibuys (Jonathan)]

I’m ready, when can I buy it?

[dang]

[handshaper (Robin Mair)]

Wow! This is huge! Now we are really getting down to business, this is going to take Elements to the next level. But more importantly it is going to be a huge time saver for those of us maintaining multiple sites that use similar elements.

Can we please ship this already?

Is there any chance of being able to get the Elements language guide ahead of time for those of us who like to read technical documentation? This will allow us to be better prepared for the arrival of the BETA. I already have a list of custom elements I’d like to create.

[upssjw (Steve W)]

Watched the video again to take it all in, if I understand this all correctly, I will spend more time building my own Elements rather than building sites because of the power, even though I just started learning Tailwind and not coded before this will be beyond exciting, release, release
I can already see a view things I would like to build

[Flash]

@gfcreative

Isn’t the point of a WYSIWYG platform to avoid the complex and tedious task of coding by hand?

They still can. All the videos before this single one shows exactly that. As I see it this is an optional feature for power users, theme makers and 3rd party developers. Potentially way beyond the power of previous RW features even with 3rd party add-ons.

[gfcreative (Eric Goodman)]

I deleted my initial comment. Agreed, it is a cool feature for sure. I tend to play devil’s advocate with everything. As cool as this is I’m wondering if I could really find a need for it in my own workflow. I’ll have to get my hands on this and really get messy. One of the main reasons I started using RW was to get away from tedious hand coding. Just wondering if this would take me down a rabbit hole where I’d be spending more time than I need to build websites. Time will tell.

[paulcruice]

Dan, I can see the benefit of this last feature for power users, and they will love it.
But I can’t program to save myself, which is why I chose RapidWeaver in the first place.
So, my concern is that over time RapidWeaver might morph more towards the power user camp.
Another concern is going to be the cost of it all. Is there any possibility that I only pay for the non-power user version or is this new feature only a minimal additional cost to you to produce it.
In any case this is excellent stuff.

[upssjw (Steve W)]

Dan
When you create custom element, is that saved in Elements or just to the specific new project, or do you need to copy across. Also if you would like to share or pass to another install on another mac how does that work, maybe be I missed this as there was a lot of information

[dan (Dan C.)]

@upssjw

just delete and write or paste (if you adjust the page size other than from the middle it stops the animations but still works, this doesn’t happen when I pasted into vscode and published
would be good to see if you can just paste into Elements, quite a lot going on
Responsive bento grid - should be a good test for the html Element and help my learning curve check I am on the right track

Hey @upssjw,

Yes, your code looks good (and works well) in RapidWeaver Elements!

I put together a quick video using your code… in the video I fix up a few missing classes, and show how the Theme Studio controls the Tailwind config file.

Live Tailwind Editor in RapidWeaver Elements

As you can see the new Custom Element feature makes things like this a breeze

Have a watch and let me know if you have any more questions or want me to test anything else for you.

Speak soon,
Dan

[dan (Dan C.)]

Hey @bryanrieger,

Glad you like it and thanks for the questions as always

@bryanrieger

1. There’s a lot of lightning bolts, I assume you can add your own element icons?

Yes, we’re going to provide a drop-well so you can customise the icon!

@bryanrieger

2. In the element editor, I don’t see anything for related scripts? Will it be possible to add scripts to elements?

Yes, you can include additional files in Elements, we just need to add a way to add them in the UI - stay tuned!

@bryanrieger

Is it possible to create elements that don’t use Tailwind, but still provide properties (colours, etc) to be edited via the property editor?

I was chatting to @bon about this today, he tells me that yes you can, it would involve using the hooks file to get the raw values. @bon will be able to tell you more about how this could work.

Ideally you want to be using the Tailwind properties to make sure all styling works seamlessly. But we do understand there’s always reasons why someone might want/need to do things another way

@bryanrieger

Will the editor provide auto-complete for the Elements language?

Hmmm, not sure on this one, we’ll need to have a chat internally about this…

[dan (Dan C.)]

@ibuys

I’m ready, when can I buy it?

That’s great to hear, and we’re working hard to get a beta shipped. Hopefully won’t be too much longer…

[dan (Dan C.)]

@handshaper

Wow! This is huge! Now we are really getting down to business, this is going to take Elements to the next level. But more importantly it is going to be a huge time saver for those of us maintaining multiple sites that use similar elements.

It’s so lovely to hear this feedback as we were a little nervous before showing it off. We didn’t know if people would see the same potential we did! And it’s now clear our worries were unfounded

@handshaper

Is there any chance of being able to get the Elements language guide ahead of time for those of us who like to read technical documentation?

Yes, I hope so!

@handshaper

I already have a list of custom elements I’d like to create.

That’s awesome, and I’m the same!

[upssjw (Steve W)]

Dan thanks for doing that, that was brilliant. You answered a couple of questions, could we use the settings in theme studio, yes excellent, could we create custom elements, yes even more brilliant and a few other bits. I was also going to ask could I write code straight into Elements and seem live update , yes brilliant. Because of your demo I could create even more complex custom layouts and but in different layouts per screen size rather than me working out how to change them responsively (if I understand correctly). Going to keep on practising now as this is really powerful stuff. Thanks again definitely have more questions.
Realising I will be able to do most of this stuff anyway in Elements WYSWYG, but this is an added bonus.
It does show how far you are along as you just dropped my code in and it worked and it is all available to change and customise etc.
Next learning curve with Tailwind may take me a few weeks before I may ask you again to test, trying to understand the concept at the moment.
My testing website has images as backgrounds in the grids, I assume I will be able to customise and store the photos in Elements. https://sjwjaw.co.uk

[dan (Dan C.)]

@paulcruice

Is there any possibility that I only pay for the non-power user version or is this new feature only a minimal additional cost to you to produce it.
In any case this is excellent stuff.

Yes, exactly. We’ll have two versions of RapidWeaver Elements, one for users that just want an easy to use website builder and one for power users.

In essence they will be the same app, but the standard version will have all the power features hidden away. It’s then up to the user to pick the version that works best for them.

As you don’t need the pro features you can buy the cheaper version, and don’t worry, the price will be very reasonable.

[upssjw (Steve W)]

Dan is it possible to target tailwind html to individual screen sizes, so say on mobile size html applies to that screen then md html applies only to that screen, just by selecting each screen at the top of the editor, then putting the putting the html in that screen, but not using the sd: or md: code etc, hopefully you understand that

[Heroic_Nonsense (Erwin Leerentveld)]

As more and more power features are shown, I understand more and more of the choices you made. Tailwind seems to be an excellent base for RapidWeaver, and the way everything integrates is fantastic!

I’m absolutely sure Elements will greatly help both pro web designers and WYSIWYG users to stay ahead of the curve.

I can also understand why the hard break with legacy RapidWeaver (+Stacks) was needed to make this possible.

Cheers,
Erwin