In this weeks video tutorial I use Cursor - a fancy new AI code editor to help me create a table that uses data from a JSON file. I also ask Cursor to generate some Tailwind code from a website screenshot I upload to it.
I take all this code and use it in Elements to create some Custom Components!
Using ChatGPT or Cursor allows anyone to easily get started creating custom components in Elements. Watch the Tutorial video below to see how all this works in practice.
Get the Project
Download the AI Card Project built in today’s demo. This is an Elements link and will open up directly in your copy of Elements
Feedback
Let me know what you thought of the tutorial, was it helpful? what else would you like to see covered? Let me know in the comments below.
Well, maybe for you…ha, ha. I got into using RW so I didn’t have to do any coding, yet it seems many of these new tutorials are about coding? Go figure…
I think the tutorials are just to show what is possible, especially AI, don’t think the no code to build a website is still valid
assume there will be many tutorials with no code
If you want better results for using Cursor to generate the full custom Component, look into Cursors ability to store a template of documents and examples to serve as a base for its generated code. It can include Template, Styles, Javascript, Hooks, and Properties. And it can give you each of those ready for the copy paste.
As a corollary, using your instruction documents, you can stope it from give you the page wrapper code that you don’t want when you are building Elements Components.
I’m using Xcode along with Cursor (Claude/ChatGPT) to build and text applications. I point both to the same Github or local resource folder. Cursor is generating the code and Xcode is building/testing the code. I was wondering if there is a way to tie Cursor to Elements custom Components to Cursor–obviously with Elements replacing Xcode.
That’s fine and dandy if you’re creating your own table of values. But I need to use a spreadsheet that’s extremely large and the data comes from somebody else. If I use this, I’m going to have to go in and replace every single little bit of data with an individual value and there will be thousands of them. That’s crazy. We need something that will pull in the data of a CSV spreadsheet file. It’s been done several times under the stack program. So how hard can it be?
It’s worth remembering that Elements is still in development, and is not finished product so all the solutions you need won’t be available just yet…
However, I’m 100% confident someone here will be able produce an awesome CSV component that would work for you - Especially when Elements hits 1.0 and beyond
I don’t know how I can be more clear. I said 20 columns with over 100 rows. I don’t think I can get any clear than that. It seems like it would’ve been easier to develop rapid Weaver where you could still include the use of stacks. Then people wouldn’t have to throw away 1000s of dollars in stacks they invested in. The wysiwig itself was enough for me to buy it. Isn’t it really about the customer? I bet if you asked all the customers who purchased if they wanted to be able to use Rapid Weaver elements and stacks, I bet they would say yes.
Why are you throwing away 1000’s of dollars? You can carry on using Rapid Weaver Classic.
This thread was (I thought, maybe mistakenly?) about how to read CSV files in Elements and display a table. I have shown an example of that being able to be done. Obviously it will need to wait until we get nearer to the Elements 1.0 release to get more finely honed as a distributable Custom Component.
