How do I build real-time document editor/viewer?

Hello,

I wanted to check if it’s possible to build something like this with Weweb? ResumeFromSpace - AI-powered resume builder (Please choose any template to go to next page)

I want to have a user input form on one side of the screen and a dynamic document on the other side that gets updated in realtime with user input. So far I have tried using Rich Text editor but it fails to work. (See: CSS Styles in Rich Text Editor are not applied)

@pravictor
you can do this by triggering an even on change , you attach the action to the input field when you type or after submit then you can load the component to display the data you want! its very easy actually! let me know if you need a video on it

Thanks @wahome_mutahi

I understand that, what I am confused about is what component to use for the document itself.

Rich Text Editor seems to be very limited and also have its own issues. My product really needs something like this and I am blocked now :frowning:

@pravictor
tell you what , you can create a zoom meeting and send it to me we look into it together! its free i wont charge

If you are going to create the templates, the user will only need to fill out a form with inputs (Name, age…). You will need a variable that has properly formatted text.

Example:

<h1>Name</h1><p>Age<p>

The final result should look like HTML that should be displayed in a Rich Text Input with a white background, simulating paper.

To make it real time, the inputs need to change a variable that you must create and use the “onchange” event (as the friend said above). In this same flow you change the “final” variable with the formatted text.

If, after registering, you want the user to edit the document directly “on paper”, you can load the Rich Text Input with that “final” variable so that the user can make changes directly to the document.

Unless you want to leave the user free to create their template, I believe the above approach can help you at some point (even if it’s not to use it :laughing:)

Hope this helps!

Best Regards!

2 Likes