Comments (2)
Hey @TechQuery - thanks for the question!
We are actually in the process of making this easier and having documentation for how to do it yourself. In short, using our HTML API is the easiest way, e.g.
fetch(
`https://cdn.builder.io/api/v1/html/${modelName}?url=${encodeURIComponent(location.href)}&apiKey=${apiKey}`
)
.then(res => res.json())
.then(content => {
if (content) {
element.innerHTML = content.data.html
} else {
// trigger some kind of "not found" callback
}
})
Where you might take modelName
and apiKey
as input args to your component. Note that the HTML API response uses a webcomponent called builder-component
by default so be sure to name your component anything else, e.g.
<builder model="..." apiKey="..." />
and call the HTML API internally and you should be good!
Happy to answer questions anytime you get stuck and follow up with the full integration docs when available
And we have a more advanced example coming in the next few weeks on how to do a deeper integration that involves rendering all of the content in your framework components and using your components in the editor
from builder.
Going to leave this open for now until we have our easier way to add full framework support coming up
from builder.
Related Issues (20)
- Builder SDK Vue breaks after 0.12.4 (properties of null (reading 'isCE') HOT 2
- defineProps macro in vue 3 with TS (custom components) HOT 1
- `@builder.io/sdk-react-native` fails to render due to rendering a `div` in `DynamicRenderer` HOT 7
- How to give just simple array as prop HOT 2
- `$elemMatch` operator does not work in the new SDK HOT 5
- Types broke in Vue SDK after 0.12.8 HOT 3
- Is it possible to have dynamically created pages? HOT 1
- see image preview instead cloud icon HOT 2
- `npm run dev` error caused by `@builder.io/dev-tools`: package.json invalid path HOT 1
- sdk-react gen2 useContext HOT 7
- `npm run dev` "package.json invalid path" error caused by `@builder.io/dev-tools` HOT 3
- [Builder.io]: Failed code evaluation: Cannot read properties of undefined (reading 'Isolate') HOT 13
- Required rule doesn't work on field of type "file" if it's nested in object
- Custom component with many localized fields freezes entire Builder editor and throws many errors in console
- Field of type "reference" restricted to specific model allows to choose entry of some random model HOT 1
- BUG: Builder Contentful Plugin Dynamic Data Binding Issue HOT 6
- Add a way to override fetch function in fetchEntries and fetchOneEntry
- `@builder.io/sdk-vue` is not properly reporting type declarations in `package.json`, causing type errors HOT 2
- Missing document for React SDK Gen 2 on `Adding editable regions to custom components` section of the docs HOT 1
- Conflict with options url.searchParams and enrich: true HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from builder.