# Using React Templates as Builder Template

**URL:** https://forum.builder.io/t/using-react-templates-as-builder-template/3444
**Category:** Technical Questions
**Created:** [March 30, 2023, 3:11pm UTC](https://forum.builder.io/t/using-react-templates-as-builder-template/3444 "2023-03-30T15:11:50Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![hamid](https://avatars.discourse-cdn.com/v4/letter/h/5fc32e/32.png) [@hamid](https://forum.builder.io/u/hamid)
#### Post date: [March 30, 2023, 3:11pm UTC](https://forum.builder.io/t/using-react-templates-as-builder-template/3444/1 "2023-03-30T15:11:50Z")

</div>

I have some predefined templates in my Nextjs app and I’m wonder if I can use them to make my landing pages.  
i may have some change in those templates so i need all pages that i created in builder be updated at once.

**What are you trying to accomplish**  
_e.g. I want to integrate builder on a landing page_

**Code stack you are integrating Builder with**  
_e.g. NextJS, react_

**Reproducible code example**  
// code is generated by AI  
const Template = ({ header, footer, row1Col1, row1Col2, row1Col3, row2Col1, row2Col2, row2Col3 }) =\> {  
return (

  
{header}  
\<div style={{ display: “flex” }}\>  
\<div style={{ flex: 1 }}\>{row1Col1}
  
\<div style={{ flex: 1 }}\>{row1Col2}  
\<div style={{ flex: 1 }}\>{row1Col3}  
  
\<div style={{ display: “flex” }}\>  
\<div style={{ flex: 1 }}\>{row2Col1}  
\<div style={{ flex: 1 }}\>{row2Col2}  
\<div style={{ flex: 1 }}\>{row2Col3}  
  
{footer}  
  
);  
};

export default Template;

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [March 30, 2023, 3:54pm UTC](https://forum.builder.io/t/using-react-templates-as-builder-template/3444/2 "2023-03-30T15:54:45Z")

</div>

Hi @hamid,

Welcome to the [builder.io](http://builder.io) forum.

For integrating pages you may find help at our doc [Integrating Pages](https://www.builder.io/c/docs/integrating-builder-pages#integrating-pages)

> **[Intro to Integrating Custom Components - Builder.io](https://www.builder.io/c/docs/custom-components-intro?_host=www.builder.io#integrating-custom-components)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

> **[builder/packages/react at main · BuilderIO/builder - Simple example](https://github.com/BuilderIO/builder/tree/main/packages/react#simple-example)**
>
> main/packages/react

---

<div class="post-metadata">

### Author: ![hamid](https://avatars.discourse-cdn.com/v4/letter/h/5fc32e/32.png) [@hamid](https://forum.builder.io/u/hamid)
#### Post date: [March 31, 2023, 10:35am UTC](https://forum.builder.io/t/using-react-templates-as-builder-template/3444/3 "2023-03-31T10:35:56Z")

</div>

Hi @manish-sharma  
i have already done it but i meant to make my own templates and using them in [builder.io](http://builder.io) as templates.

There is something called template in [builder.io](http://builder.io) panel which makes the skeleton of a page.

This skeleton is not maintainable like, as they are like a copy/paste of a first version which makes it hard to maintain.

in other word, i need to define this skeleton(builder template) in my app to use it as template in the panel where you can put some blocks in specified parts of the template defined by my system.

---

<div class="post-metadata">

### Author: ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)
#### Post date: [March 31, 2023, 11:50am UTC](https://forum.builder.io/t/using-react-templates-as-builder-template/3444/4 "2023-03-31T11:50:46Z")

</div>

Hi @hamid,

Currently, there is no option to create a “page template”, but there are other options you can do to solve this.

When you want to create one element, reuse it throughout your site, and update all instances at once, use a Symbol. When you edit and Publish updates, the Symbol updates apply immediately to all occurrences of that Symbol throughout your app.

You can use Symbols for any content you want to reuse, such as a header, footer, or products. In fact, you can use it for repeated content that you want to use in many places, such as a definition, an introductory paragraph or even a section of illustrated code.

> **[Introduction to Symbols - Builder.io](https://www.builder.io/c/docs/symbols-intro#intro-to-symbols)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

> **[Symbols with blocks - Builder.io](https://www.builder.io/c/docs/symbols-with-blocks)**
>
> Drag and drop with your components, right within your existing site or app. Build and optimize digital experiences for any tech stack, visually.

Let us know if you have any further questions. Thank you!