I am trying to create a component and embed dynamic html into the component and replace placeholders with dynamic values

Developer Support
1

I am trying to create a component and embed dynamic html into the component and replace placeholders with dynamic values.
I am able to create the component and embed it to the component and my html is also getting rendered.
I need to have some placeholders like {{text}} which needs to come dynamically from state variables or props but its not working.

below is the same dynamic html I am trying to embed

Hello, {state.name}!

and I have created a “name” state variable and set its value to “sample text”
but its not working and I am seeing the placeholders in the preview section

img1
img1823×528 10.7 KB

img2
img21354×662 84.3 KB

any kind of help will be appriciated !!
TIA

2

Hi, are you sure you need to write an HTML snippet of code?

If you are able to insert the h1, stack, text, etc elements you need using Plasmic, that would be the easiest route to go.

If you’re sure you need to write an HTML snippet, you can do the following

  1. Insert a text
  2. From the right side bar, set its text content to a dynamic value
  3. Write a JavaScript template string expression that is inserting the references to $state variables.

Let me know if that helps!

3

@yang thanks for the quick response,

the main issue is that I just don’t need to add simple html which I added as a reference its like a POC I was doing for a bigger task.
the main problem is when I am trying to embed bigger html I can not edit it and add html elements in between my html as my complete code is taken as one element.
one more thing I want to highlight is I have predesigned html pages which I need to import in plasmic which has placeholders in it and I want to map those placeholders with either prop values or state variables.

adding one sample file as a reference

image
image1356×541 38.2 KB

4

You should be able to write a multiline template literal string in Javascript like this:

// note the ` characters!
`
<p>At Mozilla, we're a global community of</p>

<ul>
  <li>${ $props.var1 }</li>
  <li>${ $props.var2 }</li>
  <li>${ $props.var3 }</li>
</ul>

<p>working together…</p>
`

Let me know if that helps!