Compose content visually. Publish it into your site.

1import { RuleCMSWidget } from "@rulecms/widget-react";23export function HomepageHero() {4  return (5    <RuleCMSWidget6      publishedKey="your-widget-key"7      ...8    />9  );10}

1import { Component } from "@angular/core";2import { RuleCMSWidgetComponent } from "@rulecms/widget-angular";34@Component({5  selector: "homepage-hero",6  imports: [RuleCMSWidgetComponent],7  template: `8    <rulecms-widget9      [publishedKey]="publishedKey"10    />11  `,12})13export class HomepageHero {14  publishedKey = "your-widget-key";15}

1<script setup>2import { RuleCMSWidget } from "@rulecms/widget-vue";34const publishedKey = "your-widget-key";5</script>67<template>8  <RuleCMSWidget :published-key="publishedKey" />9</template>

1<script>2  import { RuleCMSWidget } from "@rulecms/widget-svelte";34  const publishedKey = "your-widget-key";5</script>67<RuleCMSWidget {publishedKey} />

1<script src="https://rulecms.com/embed/widget-custom-element@0.4.5/widget-custom-element.iife.js"></script>2<rulecms-widget3  token="your-environment-token"4  published-key="your-widget-key"5></rulecms-widget>

1import 'package:rulecms_widget/rulecms_widget.dart';23class HomepageHero extends StatelessWidget {4  @override5  Widget build(BuildContext context) {6    return RuleCMSWidget(7      publishedKey: 'your-widget-key',8    );9  }10}

1import { RuleCMSWidget } from "@rulecms/widget-react-native";23export function HomepageHero() {4  return (5    <RuleCMSWidget6      publishedKey="your-widget-key"7      ...8    />9  );10}