Custom Components Integrated into Editor + React.js

Ask the community
, , ,
1

Long story short it would be really cool to build custom components with React in Wix Studio.

Elements that’s pre-built by Wix that we drag and drop is actually React components that’s built by Wix to also integrate with Wix’s UI features such as controlling design of an element, adding animations and interactions etc.

But there are limited amount of elements that’s provided by Wix it’s more than enough for basic needs and even enough for most cases but it might be not enough when advanced UI is required.

It would be really cool to build custom components using React inside Wix. So this is the summary of what I’m saying but here is the model I imagine:

We will have a folder in /public directory for custom components that we will build with React just like in custom elements. And we will write our own .jsx codes here. Basically we will write React components and export them similar to what we do in custom elements. But this time we are using React to build custom components.

→ We may even have a docs for building components that will also integrate with Wix’s UI features like animations, interactions etc. So Wix can tell us to -build your components like that, to integrate components with Wix’s features.

→ Components we build with React will have an API called .props so we will be able to set it’s props or get the current props of it. This API will allow any value that React allow. Main difference here between custom elements is the value type that’s allowed.

→ We may also be able to import current pre-built components by Wix and use these components in the components we build. These pre-built components will use Wix’s CSS so we won’t need to add CSS.

→ And also we may be able to import and use React UI libraries from npm in that way we can build advanced custom components like charts. Which we can also build with custom elements from scratch, but problem is that from scratch.

→ We will be able to use React features like useState.

→ These components will also support basic APIs of Velo like .show, hide, collapse, expand, delete, restore, rendered… etc.

→ To style the elements we can use global.css file and classes inside of it. By importing it into components we build.

→ We will be able to import and use other components we built in another component we are building. (Or components from libraries/Wix)

→ This feature might also be integrated with Codux which is Wix’s product. We may create our React components in Codux and Wix can pull the components that we built in Codux.

After we build our React components we will be able to see these components with their previews in the editor panel (inside the elements panel) and drag and drop them just like pre-built other elements.

And just like other elements we will be able to control these components with Velo by the provided APIs.

Why not to use Wix Blocks or Custom Element for this?

Wix Blocks:

  • Wix Blocks already provide us pre-built components by Wix. Then point of creating custom components with React is create components that’s not available in Wix or components that’s requires advanced logic.

Note: We will also be able to create custom components in Wix Blocks just like in the editor and in that way we can even convert these custom components into a better form by adding them events, extra APIs etc. via Wix Blocks. So this feature would also available in Blocks.

Custom Element:

  • We can’t use React directly inside custom elements. (Main reason)
  • We need to setup CSS for each component. And we can’t import CSS.
  • Custom elements won’t be integrated with Wix’s features in any way.
  • Custom elements only allows string, number and boolean as data.
  • We can’t use another custom element inside of another custom element which makes it harder to build advanced UI elements. And time waste.
  • No libraries for custom elements we need to build it from scratch.

Potential benefits of this feature:

I think there is only one but very important benefit of this: creating advanced UI will be possible and we will be able to solve problems like repeater-in-repeater much more easier.

As well as we can publish React based custom components into marketplace via Wix Blocks in this way users that don’t have the knowledge of react or JS can use advanced UI elements like charts.

Current solution to all of these:

Anything above can be also done with custom elements. But harder and more time required as well as we will have more problems when creating advanced UI elements with custom elements. I already listed above why custom elements aren’t good always.

3 Likes
2

To add some extra notes:

  • I have tried different things to use React with custom elements to achieve similar result. But it was not possible.

  • We can create re-usable react components and save them into different .js files (or inside of a single one) and then use these components in custom elements. Which may help sometimes.

  • We can’t import CSS inside .js so external components are not possible to use even custom components are hard to build because of this, inline styling can be used however. Or we can write styles in a string export it and paste it into style tag, which works.

  • When git enabled we can setup a compiler in our local env to write actual React and babel will compile it to .js and save it to our public dir to use in custom elements. Which is something very helpful.

In the end it’s not possible to create a similar experience to what I have talked above. It would be better to let Wix give us ability at least of one of these:

  • Use React and CSS to fully design pages instead of drag and drop.

  • Use React to create custom components that’s integrated into Wix’s elements panel, like widgets in Wix Blocks.

  • Use X to create advanced UI via code (X can be one or multiple of these: react, vue, angular, html, css etc.)

About using Wix Headless instead of these: this is def possible and make sense but we will have different problems when we choose this; first of all we will need to build everything (I mean UI not backend features) and this is not what I’m talking about what I say is let us add complex things only when needed but in a better way because custom elements are not very good always and probably will also create SEO problems. Using Wix Headless all alone will make everything complex.

3

Was there any update on this?

I do not think Wix will ever give such an oppertynity.

However, at least a component (HTML-Component or Custom-element) should be more flexible regarding the following checkpoints…

  1. dynamic-resizing of HTML-Components, iFrames, Custom-Elements on the page
  2. CSS-Access to those elements.

This would be already great.

4

I’m not sure what you meant with dynamic resizing but CSS is already possible within custom elements.

I have even created a system where we can use the followings together in Wix with React:

  1. React.js
  2. TypeScript with React (.tsx)
  3. CSS or SCSS

Here is the repo with some examples, I’ll also create a YouTube video about this that will be like a tutorial and a fun video to watch but not right now.

We will also try to automate the custom elements part so only thing you will need with this system is to write the React code, drag and drop a custom element and pick the right settings for it.

And React integration to Wix is something planned but I don’t have any idea if this will be available even within 2024.

5

Sorry, i think at moment i can’t really folow you.
I am not familiar with react. But it sounds very interesting.
I would have to dive deeper into this content.

I’m not sure what you meant with dynamic resizing but CSS is already possible within custom elements.

Yes, this i know → but the problem → it is only usable on HTML-Components → WITHIN COMPONENT ITSELF ONLY.

This is my problem. Even Wix-Studio do not offer any option to style or resize the HTML-Component or a CUSTOM-ELEMENT by CODE, either trough velo, nor, CSS, or other options, directly on the page.

These are the elements which supports CSS…

2024-05-09 17_30_47-Window
2024-05-09 17_30_47-Window805×1538 77.8 KB

What i need is a DYNAMIC-RESIZEABLE HTML-COMPONENT or CUSTOM-ELEMENT, working like a → REPEATER → resizing itself, if content has more width or height then the size of the HTML-Component itself.

Of course i know how to work around those problems → but work-arounds → costs time → and time is money.

So what i am searching for is a oppertynity to resize elements directly on the Wix-Page.

With the introduction of Wix-Studio, now you are capable to do this for certain elements → using CSS, but you still can’t resize the most important elements like Custom-Element or HTML-Component.

There is no CSS-Access for those elements, or do you know a HACK ? :grin: :grin: :grin: :grin:

So out of my view Wix-Studio is still the same old Wix-Editor, not capable to provide boundaryless enjoyment. You always have boundaries.

6

So as I understand you want to resize the elements with Velo (code) and have full control over page with CSS right?

If so yes this is not possible yet (CSS full control) for everything but for most of the things it’s possible, you can create custom classes and then add or remove classes from elements using Velo which will enable you to resize elements.

For another part (elements resize based on their child content) it’s already possible and happens automatically without needing something else.

  • custom elements are already adjusting the width and height based on their child but if you have content that’s not preloaded and needs some actions to load you won’t see them in the preview (basically in the editor)
  • same goes for html components too (embeds)

Put custom element inside of a box and stretch custom element to box (container) and adjust the size as you want, same applies to grids without boxes.

So this is already possible. And it was possible since Wix Editor it’s not new. There is even some CSS variables in Wix that you can edit to get general control over all custom elements default width and heigth.

7

This would work for HTML-Comps ?

You can provide a simple example?

Ok, i can provide an example and you can tell me if my wanted function is already possible…

On this page i have pasted a self generated version of an TO-DO-LIST…
https://russian-dima.wixstudio.io/test-site-repeater/todolist

Like you already can ssume → it is a HTML-Comp.

I would like to let the HTML-C. resizing accordingly to it’s included content INSIDE the HTML-Comp. So inside the HTML-Comp. there is an integrated REPEATER-FUNCTION, filling the HTML-C. with more and more CONTENT.

What will happen is → the HTML-Comp. gets it’s → SCROLLINGBAR ← what i do not want, if the content exeeds the height of the INITIAL HTML-C.-height.

I would like to resize the Comp.-Height as soon as the content overflows.

So my question is → am i able to let the HTML-Component behave like a REPEATER?

So i never see the SCROLLBAR of the HTML-Comp.-Itself?

Test it by adding some tasks and notes → and tell me what you think about my issue.

Edit: Something gone wrong. Now i event can’t bring the HTML-Comp. to live.
I will have to fix it first.

…to be continued…

8

I’m not sure if this will work with HTML Embeds. But instead of HTML Embeds you can use custom elements to fix this.

1 Like
9

Strange the site is working again, without having done anything on it :thinking: :thinking: :thinking:

However, did you test out the TO-DO-LIST, how it works and did you recognize what i mean ?

This is like i am expecting it to be → without having any SCROLLBARS → just resizing accordingly to the INSIDE-CONTENT.

2024-05-09 20_02_16-Window
2024-05-09 20_02_16-Window2238×883 38.7 KB

But this of course do not work, instead it gets it’S SCROLLBARS, because the content reaches the bottom edges of the HTML-Comp. and because it overflows the HTML-Comp. it automatically gets it’s scrollbars.

2024-05-09 20_07_45-Window
2024-05-09 20_07_45-Window2251×899 61.5 KB

I know i can DEACTIVATE the SCROLLBARS → but this wouldn’t help me either, because i want to create a REPEATER like behaviour for my HTML-Comp. It would still be an incapsulated/embedded window of a specific fix size.

This is why i need a possibility to RESIZE the HTML-Comp by code.
a) Either by CSS
b) VELO (JS)
as long as i can do it dynamically by code (screen-update-function).

So you mean it would be able to achieve my desired function by using a custom element?

How i would be able to resize the Custom-Element? For example from 600x800 pixel to 600x1000 pixel by code?

And another question…

Put custom element inside of a box and stretch custom element to box (container) and adjust the size as you want, same applies to grids without boxes.

What would be my benefit of doing this?
Would the BOX be automatically resized with every growing of my CUSTOM-ELEMENT?
That menas while the content inside the Custom-Element is growing → The size (in this case the HEIGHT) of the Custom-Element itself will resize accordingly?

This is what i am searching for.

Back to the → CUSTOM-CSS.
Am i able to set a CUSTOM-CSS-STYLE onto → either HTML-C. or Custom-Element to resize them ?

Something like the following example, where i can change style and size of a BUTTON by CSS (in this case it is the GLOBAL-CSS-STYLING)…


.button {
  position: relative;
  width: 200px;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.2); /* Glass-like transparency */
  color: #fff;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px); /* Glass effect */
}

So i am aware of how to use CSS → INSIDE ← of HTML-Comp., but i do not how to do it inside of my PAGE to give the HTML-Comp (or Custom-Element) it’s styles.

I would really like to see a simple example for this…

Put custom element inside of a box and stretch custom element to box (container) and adjust the size as you want, same applies to grids without boxes.

10

Ok, since you did not reply, i did some investigations.

I now understand your suggestion → but this is still not what i was searching for and not a complete solution for a full dynamic resizing of en element on a wix-page.

1) Adding a → BOX → (checked).
2) Adding either a HTML-Comp. or Custom-Elem. into the BOX → (checked).
—> At this checkpoint → yes both of elements support the function.
3) Streching the inner-element to the BOX → (checked).
4) Adding generated CUSTOM-CSS to the → BOX → (checked)
But here we have again the STATIC (non-dynamic) problem.
You can set the CSS-Styles only → manually. You can’t define the CSS-Values dynamically by code. This is some-kind of a → SEMI-SOLUTION (partial solution).
You still have no real dynamic process-flow, because you can’t manipulate the CSS values dynamically by code. All you can do, is to add or replace → PREDEFINED <— CSS values.

Oh man! I hate this word —> PREDEFINED <— :face_with_symbols_over_mouth:

So you can provide maybe another solution → more dynamic?
Or do i have more options, regarding my issue?

I really do not want to recreate my already created and existing REPEATER-FUNCTION inside of my HTML-Comp. on a → Wix-Page ← to solve my problem.

11

As I said dynamic sizing may not be possible with HTML embeds and you should always use custom elements for custom solutions instead of HTML embed especially if you care about SEO.

custom elements can be only indexed and understood by Google crawlers

Basic example here with custom elements which is inside a Wix container: https://exweiv.wixstudio.io/site/blank-1

Add some text into list and delete them box wil resize according to how many elements inside the box.

If you want to change the CSS (style) of an element with JS/Velo this should be done in your actual JS code in custom elements like how you would do it in another website outside of Wix.

Another detail that’s good to know is this:
image

Wix has a CSS varibale caled custom-element-width and custom-element-height which you may be able to customize with global.css file (not tested). (def customizable with site settings via custom scripts with !important flag in CSS).

So custom elements are responsive if you set them correctly but not in site preview mode because in site preview custom elements are rendered as iframes which makes them not responsive just like HTML embeds.

1 Like
12

What a bad experience → working with custom element.

Am i right → when i assume that it will render anything on my published site → on a FREE account?

Using the PREVIEW-MODE → IS HORRABLE SLOW ! Loading times INCREDIBLE HIGH !

Oh my …

I can see the created elements inside CE in preview-mode and in EDITOR itself, but not on published website.

Console-logs, not showing inside the Editor-console → showing only on the overloaded console of the browser inside the EDITOR.

O m g…

This is the way someone has to work with Custom-Elements? Really?

You can provide me some tips, how to get a better usage-experience, when working with CEs?

Is there another Editor i can use to see results of my generated code?

Wix-Editor surely can’t be my no.1-choice doing that.

For HTML-Comps i also do not use the integrated (s h i t t y) CODE-EDITOR-SECTION of the HTML-Comp. Therefore i use JS-Fiddle .

What about CEs ?

13

Ok, doesn’t matter, i have already found a solution. :wink:

14

What’s the solution you have found for it? I have the same problem.