diff --git a/web/src/beta/components/AdditionButton/index.stories.tsx b/web/src/beta/components/AdditionButton/index.stories.tsx
new file mode 100644
index 0000000000..f386b1def7
--- /dev/null
+++ b/web/src/beta/components/AdditionButton/index.stories.tsx
@@ -0,0 +1,12 @@
+import { Story, Meta } from "@storybook/react";
+import { Component } from "react";
+
+import AdditionButton, { Props } from ".";
+
+export default {
+  component: AdditionButton,
+} as Meta;
+
+export const Default: Story<Props> = args => <Component {...args} />;
+
+Default.args = {};
diff --git a/web/src/beta/components/AdditionButton/index.tsx b/web/src/beta/components/AdditionButton/index.tsx
new file mode 100644
index 0000000000..50f9387a2a
--- /dev/null
+++ b/web/src/beta/components/AdditionButton/index.tsx
@@ -0,0 +1,109 @@
+import React, { useRef, useCallback, useEffect } from "react";
+import { usePopper } from "react-popper";
+
+import Icon from "@reearth/beta/components/Icon";
+import { styled } from "@reearth/services/theme";
+
+import Portal from "../Portal";
+
+export interface Props {
+  className?: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+const AdditionButton: React.FC<Props> = ({ className, children, disabled, onClick }) => {
+  const referenceElement = useRef<HTMLDivElement>(null);
+  const popperElement = useRef<HTMLDivElement>(null);
+  const {
+    styles,
+    attributes,
+    update: updatePopper,
+  } = usePopper(referenceElement.current, popperElement.current, {
+    placement: "bottom",
+    strategy: "fixed",
+    modifiers: [
+      {
+        name: "eventListeners",
+        enabled: false,
+        options: {
+          scroll: false,
+          resize: false,
+        },
+      },
+    ],
+  });
+
+  const handleClick = useCallback(() => {
+    if (disabled) return;
+    onClick?.();
+  }, [disabled, onClick]);
+
+  // TODO: わかりずらい。もっといい方法ありそう。
+  useEffect(() => {
+    if (children) {
+      updatePopper?.();
+    }
+  }, [children, updatePopper]);
+
+  return (
+    <Wrapper>
+      <InsertArea onClick={handleClick}>
+        <Line />
+        <Button className={className} ref={referenceElement}>
+          <StyledIcon icon="plusSquare" size={13} />
+        </Button>
+        <Line />
+      </InsertArea>
+      <Portal>
+        <div ref={popperElement} style={{ ...styles.popper, zIndex: 1000 }} {...attributes.popper}>
+          {children}
+        </div>
+      </Portal>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+
+  &:hover {
+    * {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+`;
+
+const InsertArea = styled.div`
+  width: 100%;
+  padding: 0 0 30px 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  visibility: hidden;
+  opacity: 0;
+  transition: all 0.5s;
+`;
+
+const StyledIcon = styled(Icon)`
+  color: ${props => props.theme.infoBox.accent};
+`;
+
+const Button = styled.div`
+  color: ${props => props.theme.infoBox.accent};
+  margin: 0 3px;
+`;
+
+const Line = styled.div`
+  width: 43%;
+  background-color: ${props => props.theme.main.accent};
+  height: 2px;
+  margin-top: -2px;
+`;
+
+export default AdditionButton;
diff --git a/web/src/beta/components/ContentPicker/README.md b/web/src/beta/components/ContentPicker/README.md
new file mode 100644
index 0000000000..ee76aab7d7
--- /dev/null
+++ b/web/src/beta/components/ContentPicker/README.md
@@ -0,0 +1,11 @@
+# Contents Picker
+[![Generic badge](https://img.shields.io/badge/GROUP-infobox-blue.svg)]()
+[![Generic badge](https://img.shields.io/badge/SIZE-molecules-orange.svg)]()
+
+Contents Picker Modal for InfoBox
+
+## Usage
+
+## Properties
+
+## Screenshots
diff --git a/web/src/beta/components/ContentPicker/index.stories.tsx b/web/src/beta/components/ContentPicker/index.stories.tsx
new file mode 100644
index 0000000000..e9907fa84a
--- /dev/null
+++ b/web/src/beta/components/ContentPicker/index.stories.tsx
@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+
+import ContentPicker from ".";
+
+export default {
+  component: ContentPicker,
+} as Meta;
+
+export const Default = () => <ContentPicker />;
diff --git a/web/src/beta/components/ContentPicker/index.tsx b/web/src/beta/components/ContentPicker/index.tsx
new file mode 100644
index 0000000000..d043d78991
--- /dev/null
+++ b/web/src/beta/components/ContentPicker/index.tsx
@@ -0,0 +1,115 @@
+import React, { useRef } from "react";
+import { useClickAway } from "react-use";
+
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import { styled } from "@reearth/services/theme";
+
+export interface Item {
+  id: string;
+  name: string;
+  icon?: string;
+}
+
+export interface ContentsPickerProps {
+  className?: string;
+  items?: Item[];
+  onClickAway?: () => void;
+  onSelect?: (index: number) => void;
+}
+
+const ContentPicker: React.FC<ContentsPickerProps> = ({
+  className,
+  items: items,
+  onSelect,
+  onClickAway,
+}) => {
+  const ref = useRef(null);
+  useClickAway(ref, () => onClickAway?.());
+  return (
+    <Wrapper className={className} ref={ref}>
+      <ContentsList>
+        {items?.map((item, i) => (
+          <ContentItem key={item.id}>
+            <ContentButton onClick={() => onSelect?.(i)}>
+              <StyledIcon icon={item.icon} size={20} />
+              <ButtonText size="xs">{item.name}</ButtonText>
+            </ContentButton>
+          </ContentItem>
+        ))}
+        {new Array((items ?? []).length % 3).fill(undefined).map((_, i) => (
+          <GhostButton key={i} />
+        ))}
+      </ContentsList>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  background: ${props => props.theme.infoBox.bg};
+  margin-top: 5px;
+  padding: 10px;
+  box-sizing: border-box;
+  border-radius: 3px;
+  width: 288px;
+  color: ${props => props.theme.infoBox.mainText};
+  box-shadow: 0 0 5px ${props => props.theme.infoBox.deepBg};
+  &:after {
+    content: "";
+    position: absolute;
+    right: 0;
+    top: -5px;
+    left: 0;
+    width: 0px;
+    height: 0px;
+    margin: auto;
+    border-style: solid;
+    border-color: transparent transparent ${props => props.theme.infoBox.bg} transparent;
+    border-width: 0 10px 10px 10px;
+  }
+`;
+
+const ContentsList = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  height: 100%;
+  max-height: 200px;
+  overflow: auto;
+`;
+
+const ContentItem = styled.div`
+  flex: 0 0 33.33333%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ContentButton = styled.div`
+  padding: 5px;
+  width: 60px;
+  border: solid 0.5px transparent;
+  box-sizing: border-box;
+  text-align: center;
+  cursor: pointer;
+
+  &:hover {
+    border-radius: 6px;
+    border: solid 0.5px ${props => props.theme.main.select};
+  }
+`;
+
+const GhostButton = styled.div`
+  width: 30%;
+`;
+
+const ButtonText = styled(Text)`
+  margin: 3px 0;
+  user-select: none;
+`;
+
+const StyledIcon = styled(Icon)`
+  display: block;
+  margin: 0 auto;
+`;
+
+export default ContentPicker;
diff --git a/web/src/beta/components/DropHolder/index.tsx b/web/src/beta/components/DropHolder/index.tsx
new file mode 100644
index 0000000000..aca90ef284
--- /dev/null
+++ b/web/src/beta/components/DropHolder/index.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+
+export interface Props {
+  className?: string;
+}
+
+const DropHolder: React.FC<Props> = ({ className }) => {
+  const t = useT();
+
+  return (
+    <DraggableView className={className}>
+      <DragMessage>{t("Drop here")}</DragMessage>
+    </DraggableView>
+  );
+};
+
+const DraggableView = styled.div`
+  position: absolute;
+  z-index: ${props => props.theme.zIndexes.dropDown};
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: ${props => props.theme.main.accent};
+  opacity: 0.5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const DragMessage = styled.p`
+  color: ${props => props.theme.main.text};
+  opacity: 1;
+`;
+
+export default DropHolder;
diff --git a/web/src/beta/components/Filled/index.ts b/web/src/beta/components/Filled/index.ts
new file mode 100644
index 0000000000..a4a9fb95c0
--- /dev/null
+++ b/web/src/beta/components/Filled/index.ts
@@ -0,0 +1,10 @@
+import { styled } from "@reearth/services/theme";
+
+const Filled = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+`;
+
+export default Filled;
diff --git a/web/src/beta/components/Flex/index.stories.tsx b/web/src/beta/components/Flex/index.stories.tsx
new file mode 100644
index 0000000000..164a2bda21
--- /dev/null
+++ b/web/src/beta/components/Flex/index.stories.tsx
@@ -0,0 +1,43 @@
+import { Meta, Story } from "@storybook/react";
+
+import Component, { Props } from ".";
+
+export default {
+  component: Component,
+} as Meta;
+
+const ExampleDiv = () => (
+  <>
+    <div>hoge</div>
+    <div>fuga</div>
+  </>
+);
+
+export const SpaceBetween: Story<Props> = args => (
+  <Component {...args}>
+    <ExampleDiv />
+  </Component>
+);
+export const GapChildren: Story<Props> = args => (
+  <Component {...args}>
+    <div>hoge</div>
+    <div>fuga</div>
+  </Component>
+);
+export const DirectionVertical: Story<Props> = args => (
+  <Component {...args}>
+    <ExampleDiv />
+  </Component>
+);
+
+SpaceBetween.args = {
+  justify: "space-between",
+};
+
+GapChildren.args = {
+  gap: "20px",
+};
+
+DirectionVertical.args = {
+  direction: "column",
+};
diff --git a/web/src/beta/components/Flex/index.tsx b/web/src/beta/components/Flex/index.tsx
new file mode 100644
index 0000000000..a9fc3a80c5
--- /dev/null
+++ b/web/src/beta/components/Flex/index.tsx
@@ -0,0 +1,69 @@
+import { ReactNode, CSSProperties, AriaRole, AriaAttributes } from "react";
+
+import { ariaProps } from "@reearth/beta/utils/aria";
+
+export type Props = {
+  className?: string;
+  onClick?: () => void;
+  children?: ReactNode;
+  testId?: string;
+  role?: AriaRole;
+} & FlexOptions &
+  AriaAttributes;
+
+export type FlexOptions = {
+  align?: CSSProperties["alignItems"];
+  justify?: CSSProperties["justifyContent"];
+  wrap?: CSSProperties["flexWrap"];
+  direction?: CSSProperties["flexDirection"];
+  basis?: CSSProperties["flexBasis"];
+  grow?: CSSProperties["flexGrow"];
+  shrink?: CSSProperties["flexShrink"];
+  flex?: CSSProperties["flex"];
+  gap?: CSSProperties["gap"];
+};
+
+const Flex: React.FC<Props> = ({
+  className,
+  onClick,
+  children,
+  testId,
+  align,
+  justify,
+  wrap,
+  direction,
+  basis,
+  grow,
+  shrink,
+  flex,
+  gap,
+  role,
+  ...props
+}) => {
+  const aria = ariaProps(props);
+
+  return (
+    <div
+      className={className}
+      role={role}
+      style={{
+        display: "flex",
+        flexDirection: direction,
+        alignItems: align,
+        justifyContent: justify,
+        flexWrap: wrap,
+        flexBasis: basis,
+        flexGrow: grow,
+        flexShrink: shrink,
+        flex,
+        gap, // TODO: Safari doesn't support this property and please develop polyfill
+      }}
+      onClick={onClick}
+      data-testid={testId}
+      {...aria}>
+      {children}
+    </div>
+  );
+};
+
+export default Flex;
diff --git a/web/src/beta/components/FloatedPanel/index.tsx b/web/src/beta/components/FloatedPanel/index.tsx
new file mode 100644
index 0000000000..9a3a485ca2
--- /dev/null
+++ b/web/src/beta/components/FloatedPanel/index.tsx
@@ -0,0 +1,81 @@
+import { SerializedStyles } from "@emotion/react";
+import { useTransition, TransitionStatus } from "@rot1024/use-transition";
+import React, { useRef, useEffect } from "react";
+import { useClickAway } from "react-use";
+
+import useBuffered from "@reearth/beta/utils/use-buffered";
+import { styled } from "@reearth/services/theme";
+
+export type Props = {
+  className?: string;
+  visible?: boolean;
+  styles?: SerializedStyles;
+  onClose?: () => void;
+  onHover?: (hovered: boolean) => void;
+  onClickAway?: (e: Event) => void;
+  onEnter?: () => void;
+  onEntered?: () => void;
+  onExit?: () => void;
+  onExited?: () => void;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const FloatedPanel: React.FC<Props> = ({
+  className,
+  visible,
+  styles,
+  children,
+  onHover,
+  onClick,
+  onClickAway,
+  onEnter,
+  onEntered,
+  onExit,
+  onExited,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+  useClickAway(ref, e => onClickAway?.(e));
+  const transition = useTransition(!!visible, 200, {
+    mountOnEnter: true,
+    unmountOnExit: true,
+  });
+
+  // visibleがtrueの時のみ更新することで、InfoBoxを閉じるアニメーションが走る際に中身が消えないようにする
+  const bChildren = useBuffered<typeof children>(children, !!visible);
+  const bStyles = useBuffered(styles, !!visible);
+
+  useEffect(() => {
+    if (transition === "entering") onEnter?.();
+    if (transition === "entered") onEntered?.();
+    if (transition === "exiting") onExit?.();
+    if (transition === "exited") onExited?.();
+  }, [transition, onEnter, onEntered, onExit, onExited]);
+
+  return transition === "unmounted" ? null : (
+    <Wrapper
+      ref={ref}
+      className={className}
+      onClick={onClick}
+      onMouseEnter={() => onHover?.(true)}
+      onMouseLeave={() => onHover?.(false)}
+      transition={transition}
+      styles={bStyles}>
+      {bChildren}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{
+  transition?: TransitionStatus;
+  styles?: SerializedStyles;
+}>`
+  position: absolute;
+  transition: ${({ transition }) =>
+    transition === "entering" || transition === "exiting" ? "all 0.2s ease" : ""};
+  transform: ${({ transition }) =>
+    transition === "entering" || transition === "entered" ? "translateX(0%)" : "translateX(100%)"};
+  opacity: ${({ transition }) =>
+    transition === "entering" || transition === "entered" ? "1" : "0"};
+  ${({ styles }) => styles}
+`;
+
+export default FloatedPanel;
diff --git a/web/src/beta/components/Icon/Icons/arrowLeft.svg b/web/src/beta/components/Icon/Icons/arrowLeft.svg
new file mode 100644
index 0000000000..f9739753a1
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/arrowLeft.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4142 12L15.7071 17.2929C16.0976 17.6834 16.0976 18.3166 15.7071 18.7071C15.3166 19.0976 14.6834 19.0976 14.2929 18.7071L8.29289 12.7071C7.90237 12.3166 7.90237 11.6834 8.29289 11.2929L14.2929 5.29289C14.6834 4.90237 15.3166 4.90237 15.7071 5.29289C16.0976 5.68342 16.0976 6.31658 15.7071 6.70711L10.4142 12Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/arrowLongLeft.svg b/web/src/beta/components/Icon/Icons/arrowLongLeft.svg
new file mode 100644
index 0000000000..38ac0d695a
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/arrowLongLeft.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7071 5.29283C11.0976 5.68336 11.0976 6.31652 10.7071 6.70705L6.41421 10.9999L20 10.9999C20.5523 10.9999 21 11.4477 21 11.9999C21 12.5522 20.5523 12.9999 20 12.9999L6.41421 12.9999L10.7071 17.2928C11.0976 17.6834 11.0976 18.3165 10.7071 18.707C10.3166 19.0976 9.68342 19.0976 9.29289 18.707L3.29289 12.707C2.90237 12.3165 2.90237 11.6834 3.29289 11.2928L9.29289 5.29283C9.68342 4.90231 10.3166 4.90231 10.7071 5.29283Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/arrowLongRight.svg b/web/src/beta/components/Icon/Icons/arrowLongRight.svg
new file mode 100644
index 0000000000..fe771f4c96
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/arrowLongRight.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2929 18.7071C12.9024 18.3166 12.9024 17.6834 13.2929 17.2929L17.5858 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H17.5858L13.2929 6.70711C12.9024 6.31658 12.9024 5.68342 13.2929 5.29289C13.6834 4.90237 14.3166 4.90237 14.7071 5.29289L20.7071 11.2929C21.0976 11.6834 21.0976 12.3166 20.7071 12.7071L14.7071 18.7071C14.3166 19.0976 13.6834 19.0976 13.2929 18.7071Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/arrowRight.svg b/web/src/beta/components/Icon/Icons/arrowRight.svg
new file mode 100644
index 0000000000..d58281cc93
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/arrowRight.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5858 12L8.29289 17.2929C7.90237 17.6834 7.90237 18.3166 8.29289 18.7071C8.68342 19.0976 9.31658 19.0976 9.70711 18.7071L15.7071 12.7071C16.0976 12.3166 16.0976 11.6834 15.7071 11.2929L9.70711 5.29289C9.31658 4.90237 8.68342 4.90237 8.29289 5.29289C7.90237 5.68342 7.90237 6.31658 8.29289 6.70711L13.5858 12Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/arrowUpDown.svg b/web/src/beta/components/Icon/Icons/arrowUpDown.svg
new file mode 100644
index 0000000000..1621a17de7
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/arrowUpDown.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.6467 2.39628C11.0366 1.75821 11.9634 1.75821 12.3533 2.39628L16.0702 8.47855C16.4774 9.1449 15.9979 10 15.2169 10H7.78306C7.00213 10 6.52256 9.1449 6.92978 8.47855L10.6467 2.39628Z" fill="currentColor"/>
+<path d="M12.3533 22.6037C11.9634 23.2418 11.0366 23.2418 10.6467 22.6037L6.92977 16.5214C6.52256 15.8551 7.00213 15 7.78306 15L15.2169 15C15.9979 15 16.4774 15.8551 16.0702 16.5215L12.3533 22.6037Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/cancel.svg b/web/src/beta/components/Icon/Icons/cancel.svg
new file mode 100644
index 0000000000..aeedf6bbc6
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/cancel.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/crosshair.svg b/web/src/beta/components/Icon/Icons/crosshair.svg
new file mode 100644
index 0000000000..f6a43e12a4
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/crosshair.svg
@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M25 5.02586C34.6974 5.52871 42.4713 13.3026 42.9741 23H47C47.5523 23 48 23.4477 48 24C48 24.5523 47.5523 25 47 25H42.9741C42.4713 34.6974 34.6974 42.4713 25 42.9741V47C25 47.5523 24.5523 48 24 48C23.4477 48 23 47.5523 23 47V42.9741C13.3026 42.4713 5.52871 34.6974 5.02586 25H1C0.447715 25 0 24.5523 0 24C0 23.4477 0.447715 23 1 23H5.02586C5.52871 13.3026 13.3026 5.52871 23 5.02586V1C23 0.447715 23.4477 0 24 0C24.5523 0 25 0.447715 25 1V5.02586ZM41.5 24C41.5 33.665 33.665 41.5 24 41.5C14.335 41.5 6.5 33.665 6.5 24C6.5 14.335 14.335 6.5 24 6.5C33.665 6.5 41.5 14.335 41.5 24Z" fill="white"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/ellipse.svg b/web/src/beta/components/Icon/Icons/ellipse.svg
new file mode 100644
index 0000000000..3ef64d1c8a
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/ellipse.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="26" viewBox="0 0 16 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 8C16 12.4183 8 25.5 8 25.5C8 25.5 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/infoboxHTMLIcon.svg b/web/src/beta/components/Icon/Icons/infoboxHTMLIcon.svg
new file mode 100644
index 0000000000..a437c0ed20
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/infoboxHTMLIcon.svg
@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g clip-rule="evenodd" fill="#c7c5c5" fill-rule="evenodd"><path d="m6.99569 7.64878c.33819.40583.28336 1.00898-.12247 1.34717l-3.42256 2.85215 3.42256 2.8521c.40583.3382.46066.9414.12247 1.3472s-.94134.4606-1.34717.1225l-4.30435-3.587c-.21808-.1817-.34417-.4509-.34417-.7348s.12609-.5531.34417-.7348l4.30435-3.58699c.40583-.3382 1.00898-.28336 1.34717.12247z"/><path d="m17.0043 7.64878c.3382-.40583.9414-.46067 1.3472-.12247l4.3043 3.58699c.2181.1817.3442.4509.3442.7348s-.1261.5531-.3442.7348l-4.3043 3.587c-.4058.3381-1.009.2833-1.3472-.1225s-.2833-1.009.1225-1.3472l3.4225-2.8521-3.4225-2.85215c-.4058-.33819-.4607-.94134-.1225-1.34717z"/><path d="m15.1964 3.05785c.4965.18053.7526.72935.5721 1.22582l-5.7391 15.78263c-.18057.4964-.72938.7526-1.22585.572-.49647-.1805-.75258-.7293-.57205-1.2258l5.7391-15.7826c.1806-.49647.7294-.75258 1.2258-.57205z"/></g></svg>
\ No newline at end of file
diff --git a/web/src/beta/components/Icon/Icons/infoboxIcon copy.svg b/web/src/beta/components/Icon/Icons/infoboxIcon copy.svg
new file mode 100644
index 0000000000..ea693133a9
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/infoboxIcon copy.svg	
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 8C6 7.44772 6.44772 7 7 7H13.75C14.3023 7 14.75 7.44772 14.75 8C14.75 8.55228 14.3023 9 13.75 9H7C6.44772 9 6 8.55228 6 8Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C6 11.4477 6.44772 11 7 11H13.75C14.3023 11 14.75 11.4477 14.75 12C14.75 12.5523 14.3023 13 13.75 13H7C6.44772 13 6 12.5523 6 12Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4V17.1875H9.11603C9.43441 17.1875 9.74737 17.2699 10.0244 17.4268C10.3015 17.5836 10.5332 17.8096 10.697 18.0826L9.91475 18.552L10.697 18.0826L12.125 20.4625L13.553 18.0826L14.4105 18.5971L13.553 18.0826C13.7168 17.8096 13.9485 17.5836 14.2256 17.4268C14.5026 17.2699 14.8156 17.1875 15.134 17.1875L21.25 17.1875V4H3ZM1.54002 2.54002C1.88579 2.19425 2.35476 2 2.84375 2H21.4062C21.8952 2 22.3642 2.19425 22.71 2.54002C23.0557 2.88579 23.25 3.35475 23.25 3.84375V17.3438C23.25 17.8327 23.0557 18.3017 22.71 18.6475C22.3642 18.9933 21.8952 19.1875 21.4062 19.1875L15.2224 19.1875L13.706 21.7148C13.5422 21.9879 13.3105 22.2138 13.0334 22.3707C12.7563 22.5275 12.4434 22.61 12.125 22.61C11.8066 22.61 11.4937 22.5275 11.2166 22.3707C10.9395 22.2138 10.7078 21.9879 10.544 21.7148L9.02756 19.1875H2.84375C2.35475 19.1875 1.88579 18.9932 1.54002 18.6474C1.19425 18.3017 1 17.8327 1 17.3437V3.84375C1 3.35476 1.19425 2.88579 1.54002 2.54002Z" fill="currentColor"/>
+<rect x="16" y="7" width="2" height="2" rx="1" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/infoboxIcon.svg b/web/src/beta/components/Icon/Icons/infoboxIcon.svg
new file mode 100644
index 0000000000..ea693133a9
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/infoboxIcon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 8C6 7.44772 6.44772 7 7 7H13.75C14.3023 7 14.75 7.44772 14.75 8C14.75 8.55228 14.3023 9 13.75 9H7C6.44772 9 6 8.55228 6 8Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 12C6 11.4477 6.44772 11 7 11H13.75C14.3023 11 14.75 11.4477 14.75 12C14.75 12.5523 14.3023 13 13.75 13H7C6.44772 13 6 12.5523 6 12Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3 4V17.1875H9.11603C9.43441 17.1875 9.74737 17.2699 10.0244 17.4268C10.3015 17.5836 10.5332 17.8096 10.697 18.0826L9.91475 18.552L10.697 18.0826L12.125 20.4625L13.553 18.0826L14.4105 18.5971L13.553 18.0826C13.7168 17.8096 13.9485 17.5836 14.2256 17.4268C14.5026 17.2699 14.8156 17.1875 15.134 17.1875L21.25 17.1875V4H3ZM1.54002 2.54002C1.88579 2.19425 2.35476 2 2.84375 2H21.4062C21.8952 2 22.3642 2.19425 22.71 2.54002C23.0557 2.88579 23.25 3.35475 23.25 3.84375V17.3438C23.25 17.8327 23.0557 18.3017 22.71 18.6475C22.3642 18.9933 21.8952 19.1875 21.4062 19.1875L15.2224 19.1875L13.706 21.7148C13.5422 21.9879 13.3105 22.2138 13.0334 22.3707C12.7563 22.5275 12.4434 22.61 12.125 22.61C11.8066 22.61 11.4937 22.5275 11.2166 22.3707C10.9395 22.2138 10.7078 21.9879 10.544 21.7148L9.02756 19.1875H2.84375C2.35475 19.1875 1.88579 18.9932 1.54002 18.6474C1.19425 18.3017 1 17.8327 1 17.3437V3.84375C1 3.35476 1.19425 2.88579 1.54002 2.54002Z" fill="currentColor"/>
+<rect x="16" y="7" width="2" height="2" rx="1" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/infoboxLocationIcon.svg b/web/src/beta/components/Icon/Icons/infoboxLocationIcon.svg
new file mode 100644
index 0000000000..39539de592
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/infoboxLocationIcon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.25 21.75C4.25 21.1977 4.69772 20.75 5.25 20.75H18.75C19.3023 20.75 19.75 21.1977 19.75 21.75C19.75 22.3023 19.3023 22.75 18.75 22.75H5.25C4.69772 22.75 4.25 22.3023 4.25 21.75Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7.75C10.8954 7.75 10 8.64543 10 9.75C10 10.8546 10.8954 11.75 12 11.75C13.1046 11.75 14 10.8546 14 9.75C14 8.64543 13.1046 7.75 12 7.75ZM8 9.75C8 7.54086 9.79086 5.75 12 5.75C14.2091 5.75 16 7.54086 16 9.75C16 11.9591 14.2091 13.75 12 13.75C9.79086 13.75 8 11.9591 8 9.75Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.25C10.2761 3.25 8.62279 3.93482 7.40381 5.15381C6.18482 6.37279 5.5 8.02609 5.5 9.75C5.5 12.7649 7.18685 15.5347 9.00461 17.6251C9.90127 18.6562 10.8005 19.4883 11.4758 20.0623C11.6719 20.229 11.8486 20.3734 12 20.4941C12.1514 20.3734 12.3281 20.229 12.5242 20.0623C13.1995 19.4883 14.0987 18.6562 14.9954 17.6251C16.8132 15.5347 18.5 12.7649 18.5 9.75C18.5 8.02609 17.8152 6.37279 16.5962 5.15381C15.3772 3.93482 13.7239 3.25 12 3.25ZM12 21.75C11.4265 22.5692 11.4263 22.569 11.426 22.5688L11.4232 22.5669L11.4172 22.5627L11.3971 22.5484C11.3802 22.5363 11.3564 22.5192 11.3262 22.4971C11.2656 22.4529 11.1792 22.3888 11.0705 22.3057C10.8533 22.1397 10.5467 21.8974 10.1805 21.5862C9.4495 20.9648 8.47373 20.0625 7.49539 18.9374C5.56315 16.7154 3.5 13.4851 3.5 9.75C3.5 7.49566 4.39553 5.33365 5.98959 3.73959C7.58365 2.14553 9.74566 1.25 12 1.25C14.2543 1.25 16.4163 2.14553 18.0104 3.73959C19.6045 5.33365 20.5 7.49566 20.5 9.75C20.5 13.4851 18.4368 16.7154 16.5046 18.9374C15.5263 20.0625 14.5505 20.9648 13.8195 21.5862C13.4533 21.8974 13.1467 22.1397 12.9295 22.3057C12.8208 22.3888 12.7344 22.4529 12.6738 22.4971C12.6436 22.5192 12.6198 22.5363 12.6029 22.5484L12.5828 22.5627L12.5768 22.5669L12.5748 22.5683C12.5745 22.5685 12.5735 22.5692 12 21.75ZM12 21.75L12.5735 22.5692C12.2291 22.8103 11.7703 22.8099 11.426 22.5688L12 21.75Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/infoboxTableIcon.svg b/web/src/beta/components/Icon/Icons/infoboxTableIcon.svg
new file mode 100644
index 0000000000..c59348d4e1
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/infoboxTableIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19 2H5C3.34315 2 2 3.34315 2 5V9V19C2 20.6569 3.34315 22 5 22H9H19C20.6569 22 22 20.6569 22 19V9V5C22 3.34315 20.6569 2 19 2ZM10 20H19C19.5523 20 20 19.5523 20 19V10H10V20ZM8 10V20H5C4.44772 20 4 19.5523 4 19V10H8ZM10 8H20V5C20 4.44772 19.5523 4 19 4H10V8ZM8 4V8H4V5C4 4.44772 4.44772 4 5 4H8Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/infoboxTextIcon.svg b/web/src/beta/components/Icon/Icons/infoboxTextIcon.svg
new file mode 100644
index 0000000000..50629e552e
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/infoboxTextIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 5H19V7C19 7.55228 19.4477 8 20 8C20.5523 8 21 7.55228 21 7V4C21 3.44772 20.5523 3 20 3H12H4C3.44772 3 3 3.44772 3 4V7C3 7.55228 3.44772 8 4 8C4.55228 8 5 7.55228 5 7V5H11V19H9C8.44772 19 8 19.4477 8 20C8 20.5523 8.44772 21 9 21H12H15C15.5523 21 16 20.5523 16 20C16 19.4477 15.5523 19 15 19H13V5Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/infoboxVideoIcon.svg b/web/src/beta/components/Icon/Icons/infoboxVideoIcon.svg
new file mode 100644
index 0000000000..401e1fb882
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/infoboxVideoIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.41669 1.91666H16.5834H19.1684C20.7783 1.91666 22.0834 3.22175 22.0834 4.83166V7.41665V11.9981L22.0834 12L22.0834 12.0019V16.5833V19.1683C22.0834 20.7782 20.7783 22.0833 19.1684 22.0833H16.5834H7.41669H4.83169C3.22178 22.0833 1.91669 20.7782 1.91669 19.1683V16.5833V12V7.41665V4.83166C1.91669 3.22175 3.22178 1.91666 4.83169 1.91666H7.41669ZM20.25 6.49999V4.83165C20.25 4.23426 19.7657 3.74999 19.1684 3.74999H17.5V6.49999H20.25ZM17.5 8.33332H20.25V11.0833H17.5V8.33332ZM15.6667 7.41665V3.74999H8.33336V11.0833H15.6667V7.41665ZM20.25 12.9167V15.6667H17.5V12.9167H20.25ZM20.25 17.5H17.5V20.25H19.1684C19.7657 20.25 20.25 19.7657 20.25 19.1683V17.5ZM15.6667 12.9167V16.5833V20.25H8.33336V12.9167H15.6667ZM3.75002 17.5V19.1683C3.75002 19.7657 4.2343 20.25 4.83169 20.25H6.50002V17.5H3.75002ZM6.50002 15.6667H3.75002V12.9167H6.50002V15.6667ZM3.75002 11.0833V8.33332H6.50002V11.0833H3.75002ZM3.75002 6.49999H6.50002V3.74999H4.83169C4.2343 3.74999 3.75002 4.23426 3.75002 4.83165V6.49999Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/play-left.svg b/web/src/beta/components/Icon/Icons/play-left.svg
new file mode 100644
index 0000000000..65781e98e5
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/play-left.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.74073 8.42664L10.7393 13.9259C10.8151 13.9723 10.9018 13.9975 10.9906 13.9992C11.0794 14.0009 11.1671 13.9788 11.2446 13.9354C11.3221 13.8919 11.3866 13.8286 11.4314 13.752C11.4763 13.6753 11.5 13.5881 11.5 13.4993L11.5 2.50072C11.5 2.41189 11.4763 2.32467 11.4314 2.24802C11.3866 2.17137 11.3221 2.10807 11.2446 2.06462C11.1671 2.02117 11.0795 1.99914 10.9906 2.00081C10.9018 2.00247 10.8151 2.02776 10.7393 2.07408L1.74073 7.57337C1.66764 7.61804 1.60726 7.68073 1.56536 7.75543C1.52346 7.83014 1.50146 7.91436 1.50146 8.00001C1.50146 8.08566 1.52346 8.16988 1.56536 8.24458C1.60726 8.31929 1.66764 8.38198 1.74073 8.42664Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/play-right.svg b/web/src/beta/components/Icon/Icons/play-right.svg
new file mode 100644
index 0000000000..769f4b2c34
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/play-right.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2593 7.57335L5.26073 2.07406C5.18494 2.02774 5.09817 2.00245 5.00936 2.00079C4.92055 1.99913 4.8329 2.02115 4.75542 2.0646C4.67795 2.10805 4.61345 2.17136 4.56856 2.248C4.52366 2.32465 4.5 2.41187 4.5 2.5007L4.5 13.4993C4.5 13.5881 4.52366 13.6753 4.56856 13.752C4.61345 13.8286 4.67795 13.8919 4.75542 13.9354C4.8329 13.9788 4.92055 14.0009 5.00936 13.9992C5.09817 13.9975 5.18494 13.9722 5.26073 13.9259L14.2593 8.42663C14.3324 8.38196 14.3927 8.31927 14.4346 8.24457C14.4765 8.16986 14.4985 8.08564 14.4985 7.99999C14.4985 7.91434 14.4765 7.83012 14.4346 7.75542C14.3927 7.68071 14.3324 7.61802 14.2593 7.57335Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/plusSquare.svg b/web/src/beta/components/Icon/Icons/plusSquare.svg
new file mode 100644
index 0000000000..a110b04606
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/plusSquare.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 4C4.44772 4 4 4.44772 4 5V19C4 19.5523 4.44772 20 5 20H19C19.5523 20 20 19.5523 20 19V5C20 4.44772 19.5523 4 19 4H5ZM2 5C2 3.34315 3.34315 2 5 2H19C20.6569 2 22 3.34315 22 5V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 7C12.5523 7 13 7.44772 13 8V16C13 16.5523 12.5523 17 12 17C11.4477 17 11 16.5523 11 16V8C11 7.44772 11.4477 7 12 7Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C7 11.4477 7.44772 11 8 11H16C16.5523 11 17 11.4477 17 12C17 12.5523 16.5523 13 16 13H8C7.44772 13 7 12.5523 7 12Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/primPhotoIcon.svg b/web/src/beta/components/Icon/Icons/primPhotoIcon.svg
new file mode 100644
index 0000000000..50caf4969c
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/primPhotoIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2H19C20.6569 2 22 3.34315 22 5V14.9971C22 14.999 22 15.001 22 15.0029V19C22 20.6569 20.6569 22 19 22H5C3.34315 22 2 20.6569 2 19V5C2 3.34315 3.34315 2 5 2ZM20 12.5858V5C20 4.44772 19.5523 4 19 4H5C4.44772 4 4 4.44772 4 5V19C4 19.4288 4.2699 19.7946 4.64909 19.9367L15.2929 9.29289C15.6834 8.90236 16.3166 8.90236 16.7071 9.29289L20 12.5858ZM7.41421 20L16 11.4142L20 15.4142V19C20 19.5523 19.5523 20 19 20H7.41421ZM6 8.5C6 9.88071 7.11928 11 8.5 11C9.88071 11 11 9.88071 11 8.5C11 7.11928 9.88071 6 8.5 6C7.11928 6 6 7.11928 6 8.5ZM8.5 9C8.77614 9 9 8.77614 9 8.5C9 8.22386 8.77614 8 8.5 8C8.22386 8 8 8.22386 8 8.5C8 8.77614 8.22386 9 8.5 9Z" fill="currentColor"/>
+</svg>
diff --git a/web/src/beta/components/Icon/Icons/timeline.svg b/web/src/beta/components/Icon/Icons/timeline.svg
new file mode 100644
index 0000000000..621bbdfddc
--- /dev/null
+++ b/web/src/beta/components/Icon/Icons/timeline.svg
@@ -0,0 +1,15 @@
+<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="0.5" y1="12" x2="0.499999" y2="24" stroke="currentColor"/>
+<line x1="2.8999" y1="17" x2="2.8999" y2="24" stroke="currentColor"/>
+<line x1="5.30005" y1="17" x2="5.30005" y2="24" stroke="currentColor"/>
+<line x1="7.69995" y1="17" x2="7.69995" y2="24" stroke="currentColor"/>
+<line x1="10.1001" y1="17" x2="10.1001" y2="24" stroke="currentColor"/>
+<line x1="12.5" y1="12" x2="12.5" y2="24" stroke="currentColor"/>
+<line x1="14.8999" y1="17" x2="14.8999" y2="24" stroke="currentColor"/>
+<line x1="17.3" y1="17" x2="17.3" y2="24" stroke="currentColor"/>
+<line x1="19.7" y1="17" x2="19.7" y2="24" stroke="currentColor"/>
+<line x1="22.1001" y1="17" x2="22.1001" y2="24" stroke="currentColor"/>
+<line x1="24.5" y1="12" x2="24.5" y2="24" stroke="currentColor"/>
+<path d="M18 10.5C20.4853 10.5 22.5 8.48528 22.5 6C22.5 3.51472 20.4853 1.5 18 1.5C15.5147 1.5 13.5 3.51472 13.5 6C13.5 8.48528 15.5147 10.5 18 10.5Z" stroke="currentColor" stroke-miterlimit="10"/>
+<path d="M18 3.375V6H20.625" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/web/src/beta/components/Icon/icons.ts b/web/src/beta/components/Icon/icons.ts
index 254c224d9b..b358fd6d56 100644
--- a/web/src/beta/components/Icon/icons.ts
+++ b/web/src/beta/components/Icon/icons.ts
@@ -1,10 +1,60 @@
-// Dataset
+/* eslint-disable import/order */
+
+// Primitives
+import PrimPhotoOverlay from "./Icons/primPhotoIcon.svg";
+
+// Infobox Blocks
+import Infobox from "./Icons/infoboxIcon.svg";
+import InfoHTML from "./Icons/infoboxHTMLIcon.svg";
+import InfoLocation from "./Icons/infoboxLocationIcon.svg";
+import InfoTable from "./Icons/infoboxTableIcon.svg";
+import InfoText from "./Icons/infoboxTextIcon.svg";
+import InfoVideo from "./Icons/infoboxVideoIcon.svg";
+
+// Arrow
+import ArrowUpDown from "./Icons/arrowUpDown.svg";
+import ArrowLeft from "./Icons/arrowLeft.svg";
+import ArrowRight from "./Icons/arrowRight.svg";
+import ArrowLongLeft from "./Icons/arrowLongLeft.svg";
+import ArrowLongRight from "./Icons/arrowLongRight.svg";
+
+// Indicator
+import Crosshair from "./Icons/crosshair.svg";
+
+// Fields / Actions
+import PlusSquare from "./Icons/plusSquare.svg";
+import Cancel from "./Icons/cancel.svg";
 import ActionButton from "./Icons/actionButton.svg";
+
+// Dataset
 import File from "./Icons/fileIcon.svg";
 
-// Fields / Actions
+// Timeline
+import Timeline from "./Icons/timeline.svg";
+import PlayRight from "./Icons/play-right.svg";
+import PlayLeft from "./Icons/play-left.svg";
+import Ellipse from "./Icons/ellipse.svg";
 
 export default {
   file: File,
+  dl: InfoTable,
+  infobox: Infobox,
+  text: InfoText,
+  html: InfoHTML,
+  video: InfoVideo,
+  location: InfoLocation,
+  photooverlay: PrimPhotoOverlay,
+  arrowUpDown: ArrowUpDown,
+  arrowRight: ArrowRight,
+  arrowLeft: ArrowLeft,
+  arrowLongLeft: ArrowLongLeft,
+  arrowLongRight: ArrowLongRight,
+  cancel: Cancel,
+  crosshair: Crosshair,
+  plusSquare: PlusSquare,
+  ellipse: Ellipse,
+  playRight: PlayRight,
+  playLeft: PlayLeft,
+  timeline: Timeline,
   actionbutton: ActionButton,
 };
diff --git a/web/src/beta/components/Icon/index.stories.tsx b/web/src/beta/components/Icon/index.stories.tsx
index 372f101b97..3d7ccdac39 100644
--- a/web/src/beta/components/Icon/index.stories.tsx
+++ b/web/src/beta/components/Icon/index.stories.tsx
@@ -6,7 +6,6 @@ const icon =
   '<svg stroke="white" fill="#00A0E8" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" class="css-1t9xarj" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path><circle cx="12" cy="10" r="3"></circle></svg>';
 
 export default {
-  title: "Icon",
   component: Icon,
 } as Meta;
 
diff --git a/web/src/beta/components/Icon/index.tsx b/web/src/beta/components/Icon/index.tsx
index 1320454352..ba00f4a1f4 100644
--- a/web/src/beta/components/Icon/index.tsx
+++ b/web/src/beta/components/Icon/index.tsx
@@ -2,7 +2,7 @@ import svgToMiniDataURI from "mini-svg-data-uri";
 import React, { AriaAttributes, AriaRole, CSSProperties, memo, useMemo } from "react";
 import SVG from "react-inlinesvg";
 
-import { ariaProps } from "@reearth/classic/util/aria";
+import { ariaProps } from "@reearth/beta/utils/aria";
 import { styled } from "@reearth/services/theme";
 
 import Icons from "./icons";
diff --git a/web/src/beta/components/InsertionBar/index.tsx b/web/src/beta/components/InsertionBar/index.tsx
new file mode 100644
index 0000000000..9235df93bb
--- /dev/null
+++ b/web/src/beta/components/InsertionBar/index.tsx
@@ -0,0 +1,155 @@
+import { useRef, useCallback, useEffect, ReactNode } from "react";
+import { usePopper } from "react-popper";
+
+import Icon from "@reearth/beta/components/Icon";
+import { styled, css } from "@reearth/services/theme";
+
+import Portal from "../Portal";
+
+export interface Props {
+  className?: string;
+  pos?: "top" | "bottom";
+  mode?: "hidden" | "dragging" | "visible";
+  onButtonClick?: () => void;
+  children?: ReactNode;
+}
+
+const InsertionBar: React.FC<Props> = ({
+  className,
+  children,
+  pos,
+  mode = "visible",
+  onButtonClick,
+}) => {
+  const referenceElement = useRef<HTMLDivElement>(null);
+  const popperElement = useRef<HTMLDivElement>(null);
+  const {
+    styles,
+    attributes,
+    update: updatePopper,
+  } = usePopper(referenceElement.current, popperElement.current, {
+    placement: "bottom",
+    strategy: "fixed",
+    modifiers: [
+      {
+        name: "eventListeners",
+        enabled: false,
+        options: {
+          scroll: false,
+          resize: false,
+        },
+      },
+    ],
+  });
+
+  const handleClick = useCallback(() => {
+    if (mode !== "visible") return;
+    onButtonClick?.();
+  }, [mode, onButtonClick]);
+
+  // TODO: わかりずらい。もっといい方法ありそう。
+  useEffect(() => {
+    if (children) {
+      updatePopper?.();
+    }
+  }, [children, updatePopper]);
+
+  return (
+    <>
+      <Wrapper
+        ref={referenceElement}
+        className={className}
+        hovered={!!children}
+        pos={pos}
+        mode={mode}
+        onClick={handleClick}>
+        <InsertLine className="WORKAROUND_INSERTION_BAR" circleVisible={mode === "dragging"} />
+        <ButtonWrapper
+          className="WORKAROUND_INSERTION_BAR"
+          visible={mode === "visible"}
+          hovered={!!children}>
+          <StyledAddButton onClick={handleClick} icon="plusSquare" size={13} />
+        </ButtonWrapper>
+      </Wrapper>
+      <Portal>
+        <div ref={popperElement} style={{ ...styles.popper, zIndex: 1000 }} {...attributes.popper}>
+          {children}
+        </div>
+      </Portal>
+    </>
+  );
+};
+
+const StyledAddButton = styled(Icon)`
+  background: ${props => props.theme.infoBox.bg};
+  cursor: pointer;
+  display: block;
+  user-select: nocolor: ${props => props.theme.infoBox.accent};
+  padding: 0 3px;
+  `;
+
+const ButtonWrapper = styled.div<{ visible?: boolean; hovered?: boolean }>`
+  display: ${props => (props.visible ? "block" : "none")};
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: ${props => (props.hovered ? props.theme.infoBox.mainText : props.theme.infoBox.accent)};
+`;
+
+const InsertLine = styled.div<{ circleVisible?: boolean }>`
+  position: absolute;
+  left: 15px;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 2px;
+  background: ${props => props.theme.main.accent};
+
+  &::before {
+    display: ${props => (props.circleVisible ? "block" : "none")};
+    content: "";
+    position: absolute;
+    left: 0;
+    top: -4px;
+    width: 6px;
+    height: 6px;
+    border: 2px solid ${props => props.theme.main.accent};
+    border-radius: 50%;
+    background: ${props => props.theme.layers.bg};
+  }
+`;
+
+type WrapperProps = {
+  mode?: "visible" | "dragging" | "hidden";
+  pos?: "top" | "bottom";
+  hovered?: boolean;
+};
+
+const Wrapper = styled.div<WrapperProps>`
+  ${({ mode }) =>
+    mode === "hidden" &&
+    css`
+      visibility: hidden;
+      pointer-events: none;
+    `}
+  position: absolute;
+  left: 0;
+  width: 100%;
+  z-index: ${props => props.theme.zIndexes.infoBox};
+  top: ${props => (props.pos === "top" ? "0%" : "100%")};
+  transform: translateY(-50%);
+  height: 15px;
+  cursor: pointer;
+
+  & .WORKAROUND_INSERTION_BAR {
+    opacity: ${props => (!props.hovered && props.mode === "visible" ? "0" : "1")};
+    transition: all 0.5s;
+  }
+
+  &:hover .WORKAROUND_INSERTION_BAR {
+    opacity: 1;
+  }
+`;
+
+export default InsertionBar;
diff --git a/web/src/beta/components/Markdown/index.stories.tsx b/web/src/beta/components/Markdown/index.stories.tsx
new file mode 100644
index 0000000000..dcde6878b7
--- /dev/null
+++ b/web/src/beta/components/Markdown/index.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, Story } from "@storybook/react";
+
+import Component, { Props } from ".";
+
+const markdown = `
+> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
+
+* Lists
+* [ ] todo
+* [x] done
+
+A table:
+
+| a | b |
+| - | - |
+`;
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => <Component {...args} />;
+
+Default.args = {
+  children: markdown,
+  backgroundColor: "#fff",
+};
diff --git a/web/src/beta/components/Markdown/index.tsx b/web/src/beta/components/Markdown/index.tsx
new file mode 100644
index 0000000000..43d1b554cd
--- /dev/null
+++ b/web/src/beta/components/Markdown/index.tsx
@@ -0,0 +1,111 @@
+import React, { useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
+import tinycolor from "tinycolor2";
+
+import { Typography, typographyStyles } from "@reearth/beta/utils/value";
+import { styled } from "@reearth/services/theme";
+
+export type Props = {
+  className?: string;
+  children?: string;
+  styles?: Typography;
+  backgroundColor?: string;
+  onClick?: () => void;
+  onDoubleClick?: () => void;
+};
+
+const plugins = [gfm];
+
+const Markdown: React.FC<Props> = ({
+  className,
+  styles,
+  backgroundColor,
+  children,
+  onClick,
+  onDoubleClick,
+}) => {
+  const dark = useMemo(
+    () => (backgroundColor ? isDark(backgroundColor) : false),
+    [backgroundColor],
+  );
+
+  return (
+    <Wrapper
+      className="markdown-body" // github-markdown-css is imported at src/services/theme/globalstyle.tsx
+      styles={styles}
+      dark={dark}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}>
+      <ReactMarkdown remarkPlugins={plugins} className={className} linkTarget="_blank">
+        {children || ""}
+      </ReactMarkdown>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{ styles?: Typography; dark: boolean }>`
+  background-color: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+
+  ${({ styles }) => typographyStyles(styles)}
+
+  h1,
+  h2 {
+    border-bottom: none;
+  }
+
+  code {
+    background-color: ${({ dark }) =>
+      dark ? "rgba(240, 246, 252, 0.15)" : "rgba(27, 31, 35, 0.05)"};
+  }
+
+  .highlight pre,
+  pre {
+    background-color: ${({ dark }) =>
+      color(dark ? "#161b22" : "#f6f8fa", 0.1, dark)}; // #161b22 #f6f8fa
+  }
+
+  table tr {
+    background-color: inherit;
+    border-top-color: ${({ dark }) => color(dark ? "#272c32" : "#c6cbd1", 0.1, dark)};
+  }
+
+  table tr:nth-of-type(2n) {
+    background-color: ${({ dark }) => color(dark ? "#161b22" : "#f6f8fa", 0.1, dark)};
+  }
+
+  table td,
+  table th {
+    border-color: ${({ dark }) => color(dark ? "#3b434b" : "#dfe2e5", 0.1, dark)};
+  }
+
+  blockquote {
+    color: inherit; /* #8b949e #6a737d */
+    border-left-color: ${({ dark }) => color(dark ? "#3b434b" : "#dfe2e5", 0.1, dark)};
+  }
+
+  hr {
+    background-color: ${({ dark }) => color(dark ? "#30363d" : "#e1e4e8", 0.1, dark)};
+  }
+`;
+
+const color = (hex: string, alpha: number, dark: boolean) => {
+  const color = tinycolor(hex).toRgb();
+  const bg = dark ? 0 : 255;
+
+  // out = a * alpha + b * (1 - alpha)
+  // a = (out - b * (1 - alpha)) / alpha
+  const nr = Math.floor((color.r - (1 - alpha) * bg) / alpha);
+  const ng = Math.floor((color.g - (1 - alpha) * bg) / alpha);
+  const nb = Math.floor((color.b - (1 - alpha) * bg) / alpha);
+
+  return `rgba(${nr}, ${ng}, ${nb}, ${alpha})`;
+};
+
+const isDark = (hex: string): boolean => tinycolor(hex).isDark();
+
+export default Markdown;
diff --git a/web/src/beta/components/NotFound/index.stories.tsx b/web/src/beta/components/NotFound/index.stories.tsx
new file mode 100644
index 0000000000..d312728678
--- /dev/null
+++ b/web/src/beta/components/NotFound/index.stories.tsx
@@ -0,0 +1,9 @@
+import { Meta } from "@storybook/react";
+
+import NotFound from ".";
+
+export default {
+  component: NotFound,
+} as Meta;
+
+export const Default = () => <NotFound />;
diff --git a/web/src/beta/components/NotFound/index.tsx b/web/src/beta/components/NotFound/index.tsx
new file mode 100644
index 0000000000..e95975378a
--- /dev/null
+++ b/web/src/beta/components/NotFound/index.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+
+import { useT } from "@reearth/services/i18n";
+
+const NotFound: React.FC = () => {
+  const t = useT();
+  return <div>{t("Notfound")}</div>;
+};
+
+export default NotFound;
diff --git a/web/src/beta/components/Portal/index.tsx b/web/src/beta/components/Portal/index.tsx
new file mode 100644
index 0000000000..a6cf945952
--- /dev/null
+++ b/web/src/beta/components/Portal/index.tsx
@@ -0,0 +1,14 @@
+import React, { ReactNode, useLayoutEffect } from "react";
+import ReactDOM from "react-dom";
+
+const Portal: React.FC<{ children?: ReactNode }> = ({ children }) => {
+  const [node, setNode] = React.useState<HTMLElement>();
+
+  useLayoutEffect(() => {
+    setNode(document.body);
+  }, []);
+
+  return node ? ReactDOM.createPortal(children, node) : null;
+};
+
+export default Portal;
diff --git a/web/src/beta/components/Slide/index.stories.tsx b/web/src/beta/components/Slide/index.stories.tsx
new file mode 100644
index 0000000000..b0521ef255
--- /dev/null
+++ b/web/src/beta/components/Slide/index.stories.tsx
@@ -0,0 +1,34 @@
+import { Meta } from "@storybook/react";
+import { useState } from "react";
+
+import { styled } from "@reearth/services/theme";
+
+import Slide from ".";
+
+const Wrapper = styled.div`
+  width: 200px;
+  height: 200px;
+`;
+
+const Page = styled.div`
+  width: 100%;
+  height: 100%;
+  background-color: ${({ color }) => color};
+`;
+
+export default {
+  component: Slide,
+} as Meta;
+
+export const Default = () => {
+  const [pos, setPos] = useState(0);
+  return (
+    <Wrapper>
+      <Slide pos={pos}>
+        <Page key="1" color="red" onClick={() => setPos(1)} />
+        <Page key="2" color="yellow" onClick={() => setPos(2)} />
+        <Page key="3" color="green" onClick={() => setPos(0)} />
+      </Slide>
+    </Wrapper>
+  );
+};
diff --git a/web/src/beta/components/Slide/index.tsx b/web/src/beta/components/Slide/index.tsx
new file mode 100644
index 0000000000..7736105fad
--- /dev/null
+++ b/web/src/beta/components/Slide/index.tsx
@@ -0,0 +1,47 @@
+import React, { ReactNode } from "react";
+
+import { styled } from "@reearth/services/theme";
+
+export type Props = {
+  className?: string;
+  children?: ReactNode;
+  pos?: number;
+};
+
+const Slide: React.FC<Props> = ({ className, children, pos }) => {
+  return (
+    <Wrapper className={className}>
+      <Inner pos={pos}>
+        {React.Children.map(children, child =>
+          React.isValidElement(child) ? <Page key={child.key ?? undefined}>{child}</Page> : null,
+        )}
+      </Inner>
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+`;
+
+const Inner = styled.div<{ pos?: number }>`
+  position: relative;
+  transform: translateX(${({ pos }) => `-${(pos ?? 0) * 100}%`});
+  transition: transform 0.1s ease;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+`;
+
+const Page = styled.div`
+  flex: 0 0 100%;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`;
+
+export default Slide;
diff --git a/web/src/beta/components/Slider/README.md b/web/src/beta/components/Slider/README.md
new file mode 100644
index 0000000000..540634c8ff
--- /dev/null
+++ b/web/src/beta/components/Slider/README.md
@@ -0,0 +1,11 @@
+# Property Slider
+[![Generic badge](https://img.shields.io/badge/GROUP-property-yellow.svg)]()
+[![Generic badge](https://img.shields.io/badge/SIZE-atom-blue.svg)]()
+
+Slider for property
+
+> NOTE: Property以外にも使えると思っているので、利用シーンがあればglobalでも良い気がする
+
+## Usage
+
+## Properties
diff --git a/web/src/beta/components/Slider/index.stories.tsx b/web/src/beta/components/Slider/index.stories.tsx
new file mode 100644
index 0000000000..73c4a945df
--- /dev/null
+++ b/web/src/beta/components/Slider/index.stories.tsx
@@ -0,0 +1,13 @@
+import { action } from "@storybook/addon-actions";
+import { Meta } from "@storybook/react";
+
+import Slider from ".";
+
+export default {
+  component: Slider,
+} as Meta;
+
+export const Default = () => <Slider value={120} min={0} max={100} onChange={action("onchange")} />;
+export const Frame = () => (
+  <Slider value={120} min={0} max={100} onChange={action("onchange")} frame />
+);
diff --git a/web/src/beta/components/Slider/index.tsx b/web/src/beta/components/Slider/index.tsx
new file mode 100644
index 0000000000..f907322850
--- /dev/null
+++ b/web/src/beta/components/Slider/index.tsx
@@ -0,0 +1,52 @@
+import RCSlider from "rc-slider";
+import React, { ComponentProps } from "react";
+
+import { styled, css } from "@reearth/services/theme";
+
+import "rc-slider/assets/index.css";
+
+type Props = {
+  min: number;
+  max: number;
+  frame?: boolean;
+} & Omit<ComponentProps<typeof RCSlider>, "defaultValue">;
+
+const Slider: React.FC<Props> = ({ frame = false, ...props }) => (
+  <Wrapper frame={frame}>
+    <StyledSlider {...props} />
+  </Wrapper>
+);
+
+const Wrapper = styled.div<{ frame: boolean }>`
+  display: flex;
+  align-items: center;
+  border: ${({ frame, theme }) => (frame ? `solid 1px ${theme.properties.border}` : "none")};
+  border-radius: 3px;
+  background: ${({ frame, theme }) => (frame ? theme.properties.bg : "transparent")};
+  width: 100%;
+  flex: 1;
+  box-sizing: border-box;
+  ${({ frame }) =>
+    frame &&
+    css`
+      padding: 6px 12px;
+      margin-right: 5px;
+    `};
+`;
+
+const StyledSlider = styled(RCSlider)`
+  .rc-slider-handle {
+    background-color: ${({ theme }) => theme.slider.handle};
+    border: ${({ theme }) => theme.slider.border};
+  }
+
+  .rc-slider-track {
+    background-color: ${({ theme }) => theme.slider.track};
+  }
+
+  .rc-slider-handle:focus {
+    box-shadow: none;
+  }
+`;
+
+export default Slider;
diff --git a/web/src/beta/components/Text/README.md b/web/src/beta/components/Text/README.md
new file mode 100644
index 0000000000..abe788be17
--- /dev/null
+++ b/web/src/beta/components/Text/README.md
@@ -0,0 +1,82 @@
+# Property Name Text
+
+[![Generic badge](https://img.shields.io/badge/GROUP-property-yellow.svg)]()
+[![Generic badge](https://img.shields.io/badge/SIZE-atom-blue.svg)]()
+
+Text for property
+
+> NOTE: Property 以外にも使えると思っているので、利用シーンがあれば global でも良い気がする
+
+## Usage
+
+```tsx
+import Text from "@reearth/beta/components/Text";
+
+
+<Text size="m" weight="bold"> This is Text </Text>
+<Text size="l" weight="normal" color="red"> ここはテクストです </Text>
+<Text size="l" weight="normal" isParagraph={true}>
+  If you set the Text component as a paragraph, the line height will become 1.5. Otherwise, 	it will be the default line height of 1.
+</Text>
+<Text size="l" weight="normal" color="red" otherProperties={{ margin: "14px 0" }}> ここはテクストです </Text>
+```
+
+- If you put text inside another component and need more complex styling such as hover effects you can override the color prop in favor of passing stylings from the parent.
+
+```jsx
+<LongBannerButton
+  align="center"
+  justify="center"
+  onClick={() => window.location.assign("http://docs.reearth.io")}
+>
+  <MapIcon icon="map" />
+  <Text size="m" weight="bold" customColor>
+    {t("User guide")}
+  </Text>
+</LongBannerButton>;
+
+const LongBannerButton = styled(Flex)`
+  background: ${(props) => props.theme.main.paleBg};
+  width: 100%;
+  color: ${(props) => props.theme.main.text};
+
+  &:hover {
+    background: ${(props) => props.theme.main.bg};
+    color: ${(props) => props.theme.main.strongText};
+  }
+`;
+```
+
+## Properties
+
+### className: string
+
+### children: ReactNode
+
+### color: string
+
+### customColor: boolean
+
+### size:
+
+- xl: 28
+- l: 20
+- m: 16
+- s: 14
+- xs: 12
+- 2xs: 10
+
+### isParagraph: boolean
+
+​ If isParagraph is true, the line height will be 1.5. Default is 1.
+
+### weight:
+
+- Normal: 400
+- Bold: 700
+
+### otherProperties:
+
+​ Inline CSS, excluding: "color" | "fontFamily" | "fontSize" | "lineHeight" | "fontStyle"
+
+### onClick : function()
diff --git a/web/src/beta/components/Text/index.stories.tsx b/web/src/beta/components/Text/index.stories.tsx
new file mode 100644
index 0000000000..8d72738c1d
--- /dev/null
+++ b/web/src/beta/components/Text/index.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, Story } from "@storybook/react";
+
+import Text, { TextProps } from ".";
+
+export default {
+  component: Text,
+} as Meta;
+
+export const LBold: Story<TextProps> = () => (
+  <Text size="l" weight="bold">
+    LBold
+  </Text>
+);
+export const MParagraph: Story<TextProps> = () => (
+  <Text size="m" isParagraph>
+    MParagraph
+  </Text>
+);
+export const MRegularRed: Story<TextProps> = () => (
+  <Text size="m" color="red">
+    MRegular red
+  </Text>
+);
+export const MRegularRedBgBlue: Story<TextProps> = () => (
+  <Text size="m" color="red" otherProperties={{ background: "blue", border: "solid 2px red" }}>
+    MRegular red blue
+  </Text>
+);
diff --git a/web/src/beta/components/Text/index.tsx b/web/src/beta/components/Text/index.tsx
new file mode 100644
index 0000000000..c108d02ce5
--- /dev/null
+++ b/web/src/beta/components/Text/index.tsx
@@ -0,0 +1,57 @@
+import { CSSProperties } from "react";
+
+import { useTheme } from "@reearth/services/theme";
+import { FontWeight, typography, TypographySize } from "@reearth/services/theme/fonts";
+
+type NonChangeableProperties = "color" | "fontFamily" | "fontSize" | "lineHeight" | "fontStyle";
+
+type ChangeableProperties = Omit<CSSProperties, NonChangeableProperties>;
+
+export type TextProps = {
+  className?: string;
+  children: any;
+  color?: string;
+  customColor?: boolean;
+  size: TypographySize;
+  isParagraph?: boolean;
+  weight?: FontWeight;
+  otherProperties?: Partial<ChangeableProperties>;
+  onClick?: () => void;
+};
+
+const Text: React.FC<TextProps> = ({
+  className,
+  children,
+  size,
+  color,
+  customColor,
+  isParagraph = false,
+  weight = "normal",
+  otherProperties,
+  onClick,
+}) => {
+  const theme = useTheme();
+  const defaultColor = theme.text.default;
+  const typographyBySize = typography[size];
+
+  // Default is "regular"
+  const Typography = isParagraph
+    ? "paragraph" in typographyBySize && typographyBySize.paragraph
+    : weight === "bold" && "bold" in typographyBySize
+    ? typographyBySize.bold
+    : typographyBySize.regular;
+
+  return Typography ? (
+    <Typography
+      className={className}
+      style={{
+        ...otherProperties,
+        color: customColor ? undefined : color || defaultColor,
+      }}
+      onClick={onClick}>
+      {children}
+    </Typography>
+  ) : null;
+};
+
+export default Text;
diff --git a/web/src/beta/components/Timeline/ScaleList.test.tsx b/web/src/beta/components/Timeline/ScaleList.test.tsx
new file mode 100644
index 0000000000..da87049135
--- /dev/null
+++ b/web/src/beta/components/Timeline/ScaleList.test.tsx
@@ -0,0 +1,142 @@
+import { expect, test } from "vitest";
+
+import { truncMinutes } from "@reearth/beta/utils/time";
+import { render, screen } from "@reearth/test/utils";
+
+import { EPOCH_SEC, GAP_HORIZONTAL, HOURS_SECS, SCALE_INTERVAL } from "./constants";
+import ScaleList from "./ScaleList";
+
+const START_DATE = new Date("2022-07-03T12:21:21.100");
+const END_DATA = new Date("2022-07-04T12:21:21.100");
+const DIFF = END_DATA.getTime() - truncMinutes(START_DATE).getTime();
+
+test("it should render memory and date label", () => {
+  // Convert epoch time to scale by every interval
+  const scaleCount = Math.trunc(DIFF / EPOCH_SEC / SCALE_INTERVAL);
+  const hoursCount = Math.trunc(HOURS_SECS / SCALE_INTERVAL);
+
+  const { container } = render(
+    <ScaleList
+      start={START_DATE}
+      scaleCount={scaleCount}
+      hoursCount={hoursCount}
+      scaleInterval={SCALE_INTERVAL}
+      strongScaleMinutes={12}
+      gapHorizontal={GAP_HORIZONTAL}
+    />,
+  );
+
+  // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
+  const children = Array.from(container.querySelector("div")?.children || []);
+  expect(children.length).toBe(scaleCount + 1);
+
+  const expectedStrongScaleLabelList = [
+    "Jul 03 2022 12:00:00.00",
+    "Jul 03 2022 14:00:00.00",
+    "Jul 03 2022 16:00:00.00",
+    "Jul 03 2022 18:00:00.00",
+    "Jul 03 2022 20:00:00.00",
+    "Jul 03 2022 22:00:00.00",
+    "Jul 04 2022 00:00:00.00",
+    "Jul 04 2022 02:00:00.00",
+    "Jul 04 2022 04:00:00.00",
+    "Jul 04 2022 06:00:00.00",
+    "Jul 04 2022 08:00:00.00",
+    "Jul 04 2022 10:00:00.00",
+  ];
+
+  expectedStrongScaleLabelList.forEach(label => {
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+});
+
+test("it should render memory and date label when scaleInterval is changed", () => {
+  const scaleInterval = 60;
+
+  // Convert epoch time to scale by every interval
+  const scaleCount = Math.trunc(DIFF / EPOCH_SEC / scaleInterval);
+  const hoursCount = Math.trunc(HOURS_SECS / scaleInterval);
+
+  const { container } = render(
+    <ScaleList
+      start={START_DATE}
+      scaleCount={scaleCount}
+      hoursCount={hoursCount}
+      scaleInterval={scaleInterval}
+      strongScaleMinutes={12}
+      gapHorizontal={GAP_HORIZONTAL}
+    />,
+  );
+
+  // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
+  const children = Array.from(container.querySelector("div")?.children || []);
+  expect(children.length).toBe(scaleCount + 1);
+
+  const expectedStrongScaleLabelList = [
+    "Jul 03 2022 12:00:00.00",
+    "Jul 03 2022 15:00:00.00",
+    "Jul 03 2022 18:00:00.00",
+    "Jul 03 2022 21:00:00.00",
+    "Jul 04 2022 00:00:00.00",
+    "Jul 04 2022 03:00:00.00",
+    "Jul 04 2022 06:00:00.00",
+    "Jul 04 2022 09:00:00.00",
+  ];
+
+  expectedStrongScaleLabelList.forEach(label => {
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+});
+
+test("it should render memory and date label when strongScaleMinutes is changed", () => {
+  const scaleInterval = 60;
+  const strongScaleMinutes = 1;
+
+  // Convert epoch time to scale by every interval
+  const scaleCount = Math.trunc(DIFF / EPOCH_SEC / scaleInterval);
+  const hoursCount = Math.trunc(HOURS_SECS / scaleInterval);
+
+  const { container } = render(
+    <ScaleList
+      start={START_DATE}
+      scaleCount={scaleCount}
+      hoursCount={hoursCount}
+      scaleInterval={scaleInterval}
+      strongScaleMinutes={strongScaleMinutes}
+      gapHorizontal={GAP_HORIZONTAL}
+    />,
+  );
+
+  // eslint-disable-next-line testing-library/no-node-access, testing-library/no-container
+  const children = Array.from(container.querySelector("div")?.children || []);
+  expect(children.length).toBe(scaleCount + 1);
+
+  const expectedStrongScaleLabelList = [
+    "Jul 03 2022 12:00:00.00",
+    "Jul 03 2022 13:00:00.00",
+    "Jul 03 2022 14:00:00.00",
+    "Jul 03 2022 15:00:00.00",
+    "Jul 03 2022 16:00:00.00",
+    "Jul 03 2022 17:00:00.00",
+    "Jul 03 2022 18:00:00.00",
+    "Jul 03 2022 19:00:00.00",
+    "Jul 03 2022 20:00:00.00",
+    "Jul 03 2022 21:00:00.00",
+    "Jul 03 2022 22:00:00.00",
+    "Jul 03 2022 23:00:00.00",
+    "Jul 04 2022 00:00:00.00",
+    "Jul 04 2022 01:00:00.00",
+    "Jul 04 2022 02:00:00.00",
+    "Jul 04 2022 03:00:00.00",
+    "Jul 04 2022 04:00:00.00",
+    "Jul 04 2022 05:00:00.00",
+    "Jul 04 2022 06:00:00.00",
+    "Jul 04 2022 07:00:00.00",
+    "Jul 04 2022 08:00:00.00",
+    "Jul 04 2022 09:00:00.00",
+  ];
+
+  expectedStrongScaleLabelList.forEach(label => {
+    expect(screen.getByText(label)).toBeInTheDocument();
+  });
+});
diff --git a/web/src/beta/components/Timeline/ScaleList.tsx b/web/src/beta/components/Timeline/ScaleList.tsx
new file mode 100644
index 0000000000..237a8b8e96
--- /dev/null
+++ b/web/src/beta/components/Timeline/ScaleList.tsx
@@ -0,0 +1,111 @@
+import { memo } from "react";
+
+import Text from "@reearth/beta/components/Text";
+import { PublishTheme, styled } from "@reearth/services/theme";
+
+import { EPOCH_SEC, STRONG_SCALE_WIDTH, NORMAL_SCALE_WIDTH, PADDING_HORIZONTAL } from "./constants";
+import { formatDateForTimeline } from "./utils";
+
+type Props = {
+  publishedTheme?: PublishTheme;
+  gapHorizontal: number;
+} & ScaleListInnerProps;
+
+const ScaleList: React.FC<Props> = ({ publishedTheme, gapHorizontal, ...props }) => {
+  return (
+    <ScaleContainer style={{ gap: `0 ${gapHorizontal}px` }}>
+      <ScaleListInner publishedTheme={publishedTheme} {...props} />
+    </ScaleContainer>
+  );
+};
+
+type ScaleListInnerProps = {
+  publishedTheme?: PublishTheme;
+  start: Date;
+  scaleCount: number;
+  hoursCount: number;
+  scaleInterval: number;
+  strongScaleMinutes: number;
+};
+
+const ScaleListInner: React.FC<ScaleListInnerProps> = memo(function ScaleListPresenter({
+  publishedTheme,
+  start,
+  scaleCount,
+  hoursCount,
+  scaleInterval,
+  strongScaleMinutes,
+}) {
+  const lastStrongScaleIdx = scaleCount - strongScaleMinutes;
+  return (
+    <>
+      {[...Array(scaleCount + 1)].map((_, idx) => {
+        const isHour = idx % hoursCount === 0;
+        const isStrongScale = idx % strongScaleMinutes === 0;
+        if (isStrongScale && idx < lastStrongScaleIdx) {
+          const label = formatDateForTimeline(start.getTime() + idx * EPOCH_SEC * scaleInterval, {
+            detail: true,
+          });
+
+          return (
+            <LabeledScale key={idx}>
+              <ScaleLabel size="2xs" customColor publishedTheme={publishedTheme}>
+                {label}
+              </ScaleLabel>
+              <Scale isHour={isHour} isStrongScale={isStrongScale} />
+            </LabeledScale>
+          );
+        }
+        return <Scale key={idx} isHour={isHour} isStrongScale={isStrongScale} />;
+      })}
+    </>
+  );
+});
+
+export type StyledColorProps = {
+  publishedTheme: PublishTheme | undefined;
+};
+
+const ScaleContainer = styled.div`
+  display: flex;
+  width: 0;
+
+  height: 30px;
+  align-items: flex-end;
+  will-change: auto;
+  padding-left: ${PADDING_HORIZONTAL}px;
+  ::after {
+    content: "";
+    display: block;
+    padding-right: 1px;
+    height: 1px;
+  }
+`;
+
+const LabeledScale = styled.div`
+  display: flex;
+  align-items: flex-end;
+  position: relative;
+  height: 100%;
+`;
+
+const ScaleLabel = styled(Text)<StyledColorProps>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  white-space: nowrap;
+`;
+
+const Scale = styled.div<{
+  isHour: boolean;
+  isStrongScale: boolean;
+}>`
+  flex-shrink: 0;
+  width: ${({ isStrongScale }) =>
+    isStrongScale ? `${STRONG_SCALE_WIDTH}px` : `${NORMAL_SCALE_WIDTH}px`};
+  height: ${({ isHour }) => (isHour && "16px") || "12px"};
+  background: ${({ theme }) => theme.colors.publish.dark.text.weak};
+`;
+
+export default ScaleList;
diff --git a/web/src/beta/components/Timeline/constants.ts b/web/src/beta/components/Timeline/constants.ts
new file mode 100644
index 0000000000..8f8be5eabb
--- /dev/null
+++ b/web/src/beta/components/Timeline/constants.ts
@@ -0,0 +1,17 @@
+import { metricsSizes } from "@reearth/services/theme";
+
+export const EPOCH_SEC = 1000;
+export const PADDING_HORIZONTAL = metricsSizes["m"];
+export const BORDER_WIDTH = 1;
+export const MAX_ZOOM_RATIO = 3;
+export const STRONG_SCALE_WIDTH = 2;
+export const NORMAL_SCALE_WIDTH = 1;
+export const GAP_HORIZONTAL = 14;
+export const HOURS_SECS = 3600;
+export const SCALE_INTERVAL = 600;
+export const DAY_SECS = 86400;
+export const MINUTES_SEC = 60;
+export const SCALE_ZOOM_INTERVAL = 5;
+export const KNOB_SIZE = 25;
+
+export const SCALE_LABEL_WIDTH = 111;
diff --git a/web/src/beta/components/Timeline/hooks.ts b/web/src/beta/components/Timeline/hooks.ts
new file mode 100644
index 0000000000..31126b8eb2
--- /dev/null
+++ b/web/src/beta/components/Timeline/hooks.ts
@@ -0,0 +1,322 @@
+import React, {
+  ChangeEventHandler,
+  MouseEvent,
+  MouseEventHandler,
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  WheelEventHandler,
+} from "react";
+
+import { truncMinutes } from "@reearth/beta/utils/time";
+
+import {
+  BORDER_WIDTH,
+  DAY_SECS,
+  EPOCH_SEC,
+  GAP_HORIZONTAL,
+  MAX_ZOOM_RATIO,
+  PADDING_HORIZONTAL,
+  HOURS_SECS,
+  NORMAL_SCALE_WIDTH,
+  STRONG_SCALE_WIDTH,
+} from "./constants";
+import { TimeEventHandler, Range } from "./types";
+import { calcScaleInterval, formatDateForTimeline } from "./utils";
+
+const convertPositionToTime = (e: MouseEvent, { start, end }: Range) => {
+  const curTar = e.currentTarget;
+  const width = curTar.scrollWidth - (PADDING_HORIZONTAL + BORDER_WIDTH) * 2;
+  const rect = curTar.getBoundingClientRect();
+  const clientX = e.clientX - rect.x;
+  const scrollX = curTar.scrollLeft;
+  const posX = clientX + scrollX - (PADDING_HORIZONTAL + BORDER_WIDTH);
+  const percent = posX / width;
+  const rangeDiff = end - start;
+  const sec = rangeDiff * percent;
+  return Math.min(Math.max(start, start + sec), end);
+};
+
+type InteractionOption = {
+  range: Range;
+  zoom: number;
+  scaleElement: RefObject<HTMLDivElement>;
+  setScaleWidth: React.Dispatch<React.SetStateAction<number>>;
+  setZoom: React.Dispatch<React.SetStateAction<number>>;
+  onClick?: TimeEventHandler;
+  onDrag?: TimeEventHandler;
+};
+
+const useTimelineInteraction = ({
+  range: { start, end },
+  zoom,
+  scaleElement,
+  setScaleWidth,
+  setZoom,
+  onClick,
+  onDrag,
+}: InteractionOption) => {
+  const [isMouseDown, setIsMouseDown] = useState(false);
+  const handleOnMouseDown = useCallback(() => {
+    setIsMouseDown(true);
+  }, []);
+  const handleOnMouseUp = useCallback(() => {
+    setIsMouseDown(false);
+  }, []);
+  const handleOnMouseMove: MouseEventHandler = useCallback(
+    e => {
+      if (!isMouseDown || !onDrag || !e.target) {
+        return;
+      }
+
+      onDrag(convertPositionToTime(e, { start, end }));
+
+      const scrollThreshold = 30;
+      const scrollAmount = 20;
+      const rect = e.currentTarget.getBoundingClientRect();
+      const clientX = e.clientX - rect.x;
+      const curTar = e.currentTarget;
+      const clientWidth = curTar.clientWidth;
+
+      if (clientX > clientWidth - scrollThreshold) {
+        curTar.scroll(curTar.scrollLeft + scrollAmount, 0);
+      }
+      if (clientX < scrollThreshold) {
+        curTar.scroll(curTar.scrollLeft - scrollAmount, 0);
+      }
+    },
+    [onDrag, start, end, isMouseDown],
+  );
+
+  useEffect(() => {
+    window.addEventListener("mouseup", handleOnMouseUp, { passive: true });
+    return () => {
+      window.removeEventListener("mouseup", handleOnMouseUp);
+    };
+  }, [handleOnMouseUp]);
+
+  const handleOnClick: MouseEventHandler = useCallback(
+    e => {
+      if (!onClick) return;
+      onClick(convertPositionToTime(e, { start, end }));
+    },
+    [onClick, end, start],
+  );
+
+  const handleOnWheel: WheelEventHandler = useCallback(
+    e => {
+      const { deltaX, deltaY } = e;
+      const isHorizontal = Math.abs(deltaX) > 0 || Math.abs(deltaX) < 0;
+      if (isHorizontal) return;
+
+      setZoom(() => Math.min(Math.max(1, zoom + deltaY * -0.01), MAX_ZOOM_RATIO));
+    },
+    [zoom, setZoom],
+  );
+
+  useEffect(() => {
+    const elm = scaleElement.current;
+    if (!elm) return;
+
+    const obs = new ResizeObserver(m => {
+      const target = m[0].target;
+      setScaleWidth(target.clientWidth);
+    });
+    obs.observe(elm);
+
+    return () => {
+      obs.disconnect();
+    };
+  }, [setScaleWidth, scaleElement]);
+
+  return {
+    onMouseDown: handleOnMouseDown,
+    onMouseMove: handleOnMouseMove,
+    onClick: handleOnClick,
+    onWheel: handleOnWheel,
+  };
+};
+
+type TimelinePlayerOptions = {
+  currentTime: number;
+  onPlay?: (isPlaying: boolean) => void;
+  onPlayReversed?: (isPlaying: boolean) => void;
+  onSpeedChange?: (speed: number) => void;
+};
+
+const useTimelinePlayer = ({
+  currentTime,
+  onPlay,
+  onPlayReversed,
+  onSpeedChange,
+}: TimelinePlayerOptions) => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isPlayingReversed, setIsPlayingReversed] = useState(false);
+  const syncCurrentTimeRef = useRef(currentTime);
+  const handleOnSpeedChange: ChangeEventHandler<HTMLInputElement> = useCallback(
+    e => {
+      onSpeedChange?.(parseInt(e.currentTarget.value, 10));
+    },
+    [onSpeedChange],
+  );
+  const toggleIsPlaying = useCallback(() => {
+    if (isPlayingReversed) {
+      setIsPlayingReversed(false);
+      onPlayReversed?.(false);
+    }
+    setIsPlaying(p => !p);
+    onPlay?.(!isPlaying);
+  }, [isPlayingReversed, onPlay, isPlaying, onPlayReversed]);
+  const toggleIsPlayingReversed = useCallback(() => {
+    if (isPlaying) {
+      setIsPlaying(false);
+      onPlay?.(false);
+    }
+    setIsPlayingReversed(p => !p);
+    onPlayReversed?.(!isPlayingReversed);
+  }, [isPlaying, isPlayingReversed, onPlay, onPlayReversed]);
+  const formattedCurrentTime = useMemo(() => {
+    const textDate = formatDateForTimeline(currentTime, { detail: true });
+    const lastIdx = textDate.lastIndexOf(" ");
+    const date = textDate.slice(0, lastIdx);
+    const time = textDate.slice(lastIdx);
+    return {
+      date,
+      time,
+    };
+  }, [currentTime]);
+
+  useEffect(() => {
+    syncCurrentTimeRef.current = currentTime;
+  }, [currentTime]);
+
+  return {
+    onSpeedChange: handleOnSpeedChange,
+    formattedCurrentTime,
+    isPlaying,
+    isPlayingReversed,
+    toggleIsPlaying,
+    toggleIsPlayingReversed,
+  };
+};
+
+const getRange = (range?: { [K in keyof Range]?: Range[K] }): Range => {
+  const { start, end } = range || {};
+  if (start !== undefined && end !== undefined) {
+    return { start, end };
+  }
+
+  if (start !== undefined && end === undefined) {
+    return {
+      start,
+      end: start + DAY_SECS * EPOCH_SEC,
+    };
+  }
+
+  if (start === undefined && end !== undefined) {
+    return {
+      start: Math.max(end - DAY_SECS * EPOCH_SEC, 0),
+      end,
+    };
+  }
+
+  const defaultStart = Date.now();
+
+  return {
+    start: defaultStart,
+    end: defaultStart + DAY_SECS * EPOCH_SEC,
+  };
+};
+
+type Option = {
+  currentTime: number;
+  range?: { [K in keyof Range]?: Range[K] };
+  onClick?: TimeEventHandler;
+  onDrag?: TimeEventHandler;
+  onPlay?: (isPlaying: boolean) => void;
+  onPlayReversed?: (isPlaying: boolean) => void;
+  onSpeedChange?: (speed: number) => void;
+};
+
+export const useTimeline = ({
+  currentTime,
+  range: _range,
+  onClick,
+  onDrag,
+  onPlay,
+  onPlayReversed,
+  onSpeedChange,
+}: Option) => {
+  const range = useMemo(() => {
+    const range = getRange(_range);
+    if (process.env.NODE_ENV !== "production") {
+      if (range.start > range.end) {
+        throw new Error("Out of range error. `range.start` should be less than `range.end`");
+      }
+    }
+    return {
+      start: truncMinutes(new Date(range.start)).getTime(),
+      end: truncMinutes(new Date(range.end)).getTime(),
+    };
+  }, [_range]);
+  const { start, end } = range;
+  const [zoom, setZoom] = useState(1);
+  const startDate = useMemo(() => new Date(start), [start]);
+  const zoomedGap = GAP_HORIZONTAL * (zoom - Math.trunc(zoom) + 1);
+  const epochDiff = end - start;
+
+  const scaleElement = useRef<HTMLDivElement | null>(null);
+  const [scaleWidth, setScaleWidth] = useState(0);
+
+  const {
+    scaleCount,
+    scaleInterval,
+    strongScaleMinutes,
+    gap: gapHorizontal,
+  } = useMemo(
+    () => calcScaleInterval(epochDiff, zoom, { gap: zoomedGap, width: scaleWidth }),
+    [epochDiff, zoom, scaleWidth, zoomedGap],
+  );
+
+  // Count hours scale
+  const hoursCount = Math.trunc(HOURS_SECS / scaleInterval);
+
+  // Convert scale count to pixel.
+  const currentPosition = useMemo(() => {
+    const diff = Math.min((currentTime - start) / EPOCH_SEC / scaleInterval, scaleCount);
+    const strongScaleCount = diff / strongScaleMinutes - 1;
+    return Math.max(
+      (diff - strongScaleCount) * (NORMAL_SCALE_WIDTH + gapHorizontal) +
+        strongScaleCount * (STRONG_SCALE_WIDTH + gapHorizontal),
+      0,
+    );
+  }, [currentTime, start, scaleCount, gapHorizontal, scaleInterval, strongScaleMinutes]);
+
+  const events = useTimelineInteraction({
+    range,
+    zoom,
+    setZoom,
+    onClick,
+    onDrag,
+    scaleElement,
+    setScaleWidth,
+  });
+  const player = useTimelinePlayer({ currentTime, onPlay, onPlayReversed, onSpeedChange });
+
+  return {
+    startDate,
+    scaleCount,
+    hoursCount,
+    gapHorizontal,
+    scaleInterval,
+    strongScaleMinutes,
+    currentPosition,
+    events,
+    player,
+    scaleElement,
+    shouldScroll: zoom !== 1,
+  };
+};
diff --git a/web/src/beta/components/Timeline/index.stories.tsx b/web/src/beta/components/Timeline/index.stories.tsx
new file mode 100644
index 0000000000..d50f84635e
--- /dev/null
+++ b/web/src/beta/components/Timeline/index.stories.tsx
@@ -0,0 +1,43 @@
+import { Meta, Story } from "@storybook/react";
+import { useState } from "react";
+
+import Timeline, { Props } from ".";
+
+export default {
+  component: Timeline,
+} as Meta;
+
+export const Normal: Story<Props> = () => (
+  <Timeline
+    currentTime={new Date("2022-06-30T12:20:00.000").getTime()}
+    range={{
+      start: new Date("2022-06-30T21:00:00.000").getTime(),
+      end: new Date("2022-07-03T12:21:21.221").getTime(),
+    }}
+    isOpened={true}
+  />
+);
+
+export const DefaultRange: Story<Props> = () => (
+  <Timeline
+    // Forward a hour
+    currentTime={Date.now() + 3600000}
+    isOpened={true}
+  />
+);
+
+export const Movable: Story<Props> = () => {
+  // Forward a hour
+  const [currentTime, setCurrentTime] = useState(() => Date.now() + 3600000);
+  const [isOpened, setIsOpened] = useState(false);
+  return (
+    <Timeline
+      currentTime={currentTime}
+      onClick={setCurrentTime}
+      onDrag={setCurrentTime}
+      isOpened={isOpened}
+      onOpen={() => setIsOpened(true)}
+      onClose={() => setIsOpened(false)}
+    />
+  );
+};
diff --git a/web/src/beta/components/Timeline/index.test.tsx b/web/src/beta/components/Timeline/index.test.tsx
new file mode 100644
index 0000000000..60e0354207
--- /dev/null
+++ b/web/src/beta/components/Timeline/index.test.tsx
@@ -0,0 +1,168 @@
+import { useState } from "react";
+import { expect, test, vi, vitest } from "vitest";
+
+import { render, screen, fireEvent } from "@reearth/test/utils";
+
+import { PADDING_HORIZONTAL, BORDER_WIDTH, GAP_HORIZONTAL } from "./constants";
+
+import Timeline from ".";
+
+global.ResizeObserver = class {
+  observe() {}
+  disconnect() {}
+} as any;
+
+const CURRENT_TIME = new Date("2022-07-03T00:00:00.000").getTime();
+// This is width when range is one day.
+const SCROLL_WIDTH = 2208;
+
+const TimelineWrapper: React.FC<{
+  isOpened?: boolean;
+  onPlay?: () => void;
+  onPlayReversed?: () => void;
+  onSpeedChange?: (speed: number) => void;
+}> = ({ isOpened = true, onPlay, onPlayReversed, onSpeedChange }) => {
+  const [currentTime, setCurrentTime] = useState(CURRENT_TIME);
+  return (
+    <Timeline
+      currentTime={currentTime}
+      range={{ start: CURRENT_TIME }}
+      onClick={setCurrentTime}
+      onDrag={setCurrentTime}
+      onPlay={onPlay}
+      onPlayReversed={onPlayReversed}
+      onSpeedChange={onSpeedChange}
+      isOpened={isOpened}
+    />
+  );
+};
+
+test("it should open when timeline open button is clicked", () => {
+  const { rerender } = render(<TimelineWrapper isOpened={false} />);
+
+  expect(screen.queryAllByRole("slider")).toHaveLength(0);
+
+  rerender(<TimelineWrapper isOpened />);
+
+  expect(screen.queryAllByRole("slider")).not.toHaveLength(0);
+});
+
+test("it should get time from clicked position", () => {
+  render(<TimelineWrapper />);
+  const slider = screen.getAllByRole("slider")[1];
+  const currentPosition = 12;
+  vi.spyOn(slider, "scrollWidth", "get").mockImplementation(() => SCROLL_WIDTH);
+
+  fireEvent.click(slider, {
+    clientX: PADDING_HORIZONTAL + BORDER_WIDTH + currentPosition,
+  });
+
+  const iconWrapper = screen.getByTestId("knob-icon");
+  expect(iconWrapper.style.left).toBe("-0.5px");
+});
+
+test("it should get time from mouse moved position", () => {
+  render(<TimelineWrapper />);
+  const slider = screen.getAllByRole("slider")[1];
+  const currentPosition = 12;
+  const clientX = PADDING_HORIZONTAL + BORDER_WIDTH + currentPosition;
+  const expectedLeft = "-0.5px";
+
+  const scroll = vi.fn();
+  window.HTMLElement.prototype.scroll = scroll;
+
+  vi.spyOn(slider, "scrollWidth", "get").mockImplementation(() => SCROLL_WIDTH);
+
+  // Check initial position
+  expect(
+    Math.abs(Math.trunc(parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10))),
+  ).toBe(0);
+
+  // It should not move
+  fireEvent.mouseMove(slider, {
+    clientX,
+  });
+  expect(
+    Math.abs(Math.trunc(parseInt(screen.getByTestId("knob-icon").style.left.split("px")[0], 10))),
+  ).toBe(0);
+
+  // It should move
+  fireEvent.mouseDown(slider);
+  fireEvent.mouseMove(slider, {
+    clientX,
+  });
+  fireEvent.mouseUp(slider);
+  expect(screen.getByTestId("knob-icon").style.left).toBe(expectedLeft);
+
+  // It should not move
+  fireEvent.mouseMove(slider, {
+    clientX: clientX * 2,
+  });
+  expect(screen.getByTestId("knob-icon").style.left).toBe(expectedLeft);
+});
+
+test("it should get correct strongScaleHours from amount of scroll", () => {
+  render(<TimelineWrapper />);
+  const slider = screen.getAllByRole("slider")[1];
+  vi.spyOn(slider, "scrollWidth", "get").mockImplementation(() => SCROLL_WIDTH);
+
+  fireEvent.wheel(slider, {
+    deltaY: -50,
+  });
+  expect(
+    parseInt(slider.querySelector("div")?.style.gap.split(" ")[1].split("px")[0] || "", 10),
+  ).toBe(GAP_HORIZONTAL * 1.5);
+
+  // Reset gap and increase memory.
+  fireEvent.wheel(slider, {
+    deltaY: -50,
+  });
+  expect(
+    parseInt(slider.querySelector("div")?.style.gap.split(" ")[1].split("px")[0] || "", 10),
+  ).toBe(GAP_HORIZONTAL);
+});
+
+test("it should invoke onPlay or onPlayReversed when play button is clicked", async () => {
+  const mockOnPlay = vitest.fn();
+  const mockOnPlayReversed = vitest.fn();
+  render(<TimelineWrapper onPlay={mockOnPlay} onPlayReversed={mockOnPlayReversed} />);
+
+  // TODO: get element by label text
+  // Click play button
+  fireEvent.click(screen.getAllByRole("button")[2]);
+  expect(mockOnPlay).toBeCalledWith(true);
+  // Click play button again
+  fireEvent.click(screen.getAllByRole("button")[2]);
+  expect(mockOnPlay).toBeCalledWith(false);
+
+  // TODO: get element by label text
+  // Click playback button
+  fireEvent.click(screen.getAllByRole("button")[1]);
+  expect(mockOnPlayReversed).toBeCalledWith(true);
+  // Click playback button again
+  fireEvent.click(screen.getAllByRole("button")[1]);
+  expect(mockOnPlayReversed).toBeCalledWith(false);
+
+  // Click play button
+  fireEvent.click(screen.getAllByRole("button")[2]);
+  expect(mockOnPlay).toBeCalledWith(true);
+  // And click playback button
+  fireEvent.click(screen.getAllByRole("button")[1]);
+  expect(mockOnPlayReversed).toBeCalledWith(true);
+  expect(mockOnPlay).toBeCalledWith(false);
+  // Finally click play button
+  fireEvent.click(screen.getAllByRole("button")[2]);
+  expect(mockOnPlay).toBeCalledWith(true);
+  expect(mockOnPlayReversed).toBeCalledWith(false);
+});
+
+test("it should invoke onSpeedChange when speed range is changed", async () => {
+  const mockOnSpeedChange = vitest.fn();
+  render(<TimelineWrapper onSpeedChange={mockOnSpeedChange} />);
+
+  // TODO: get element by label text
+  // Click play button
+  fireEvent.input(screen.getAllByRole("slider")[0], { target: { value: 100 } });
+
+  expect(mockOnSpeedChange).toBeCalledWith(100);
+});
diff --git a/web/src/beta/components/Timeline/index.tsx b/web/src/beta/components/Timeline/index.tsx
new file mode 100644
index 0000000000..01b2d7fcf1
--- /dev/null
+++ b/web/src/beta/components/Timeline/index.tsx
@@ -0,0 +1,321 @@
+import { memo } from "react";
+
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import { useT } from "@reearth/services/i18n";
+import { styled, PublishTheme } from "@reearth/services/theme";
+
+import { BORDER_WIDTH, PADDING_HORIZONTAL, KNOB_SIZE } from "./constants";
+import { useTimeline } from "./hooks";
+import ScaleList, { StyledColorProps } from "./ScaleList";
+import { Range, TimeEventHandler } from "./types";
+
+export type { Range, TimeEventHandler } from "./types";
+
+export type Props = {
+  /**
+   * @description
+   * This value need to be epoch time.
+   */
+  currentTime: number;
+  /**
+   * @description
+   * These value need to be epoch time.
+   */
+  range?: { [K in keyof Range]?: Range[K] };
+  speed?: number;
+  isOpened?: boolean;
+  theme?: PublishTheme;
+  onClick?: TimeEventHandler;
+  onDrag?: TimeEventHandler;
+  onPlay?: (isPlaying: boolean) => void;
+  onPlayReversed?: (isPlaying: boolean) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  onSpeedChange?: (speed: number) => void;
+};
+
+const Timeline: React.FC<Props> = memo(function TimelinePresenter({
+  currentTime,
+  range,
+  speed,
+  isOpened,
+  theme,
+  onClick,
+  onDrag,
+  onPlay,
+  onPlayReversed,
+  onOpen,
+  onClose,
+  onSpeedChange: onSpeedChangeProps,
+}) {
+  const {
+    startDate,
+    scaleCount,
+    hoursCount,
+    gapHorizontal,
+    scaleInterval,
+    strongScaleMinutes,
+    currentPosition,
+    scaleElement,
+    events,
+    shouldScroll,
+    player: {
+      formattedCurrentTime,
+      isPlaying,
+      isPlayingReversed,
+      toggleIsPlaying,
+      toggleIsPlayingReversed,
+      onSpeedChange,
+    },
+  } = useTimeline({
+    currentTime,
+    range,
+    onClick,
+    onDrag,
+    onPlay,
+    onPlayReversed,
+    onSpeedChange: onSpeedChangeProps,
+  });
+  const t = useT();
+
+  return isOpened ? (
+    <Container publishedTheme={theme}>
+      <div style={{ width: "32px" }}>
+        <CloseButton publishedTheme={theme} onClick={onClose}>
+          <Icon alt={t("Close timeline")} icon="cancel" size={16} />
+        </CloseButton>
+      </div>
+      <ToolBox>
+        <li>
+          <PlayButton
+            publishedTheme={theme}
+            isPlaying={isPlayingReversed}
+            onClick={toggleIsPlayingReversed}>
+            <Icon alt={t("Playback timeline")} icon="playLeft" size={16} />
+          </PlayButton>
+        </li>
+        <li>
+          <PlayButton
+            isRight
+            publishedTheme={theme}
+            isPlaying={isPlaying}
+            onClick={toggleIsPlaying}>
+            <Icon alt={t("Play timeline")} icon="playRight" size={16} />
+          </PlayButton>
+        </li>
+        <li>
+          <InputRangeLabel>
+            <InputRangeLabelText size="xs" customColor publishedTheme={theme}>
+              X{speed}
+            </InputRangeLabelText>
+            <InputRange
+              publishedTheme={theme}
+              type="range"
+              max={10000}
+              min={1}
+              value={speed}
+              onChange={onSpeedChange}
+            />
+          </InputRangeLabel>
+        </li>
+      </ToolBox>
+      <CurrentTimeWrapper>
+        <CurrentTime size="xs" customColor publishedTheme={theme}>
+          {formattedCurrentTime.date}
+        </CurrentTime>
+        <CurrentTime size="xs" customColor publishedTheme={theme}>
+          {formattedCurrentTime.time}
+        </CurrentTime>
+      </CurrentTimeWrapper>
+      {/**
+       * TODO: Support keyboard operation for accessibility
+       * see: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
+       */}
+      <ScaleBox role="slider" {...events} ref={scaleElement} shouldScroll={shouldScroll}>
+        <ScaleList
+          start={startDate}
+          scaleCount={scaleCount}
+          hoursCount={hoursCount}
+          gapHorizontal={gapHorizontal}
+          scaleInterval={scaleInterval}
+          strongScaleMinutes={strongScaleMinutes}
+          publishedTheme={theme}
+        />
+        <IconWrapper
+          data-testid="knob-icon"
+          publishedTheme={theme}
+          style={{
+            left: currentPosition + PADDING_HORIZONTAL - KNOB_SIZE / 2,
+          }}>
+          <Icon icon="ellipse" alt={t("ellipse")} size={KNOB_SIZE} />
+        </IconWrapper>
+      </ScaleBox>
+    </Container>
+  ) : (
+    <OpenButton publishedTheme={theme} onClick={onOpen}>
+      <Icon alt={t("Open timeline")} icon="timeline" size={24} />
+    </OpenButton>
+  );
+});
+
+const Container = styled.div<StyledColorProps>`
+  background: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.main.deepBg};
+  width: 100%;
+  height: 40px;
+  display: flex;
+  box-sizing: border-box;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
+
+const OpenButton = styled.button<StyledColorProps>`
+  background: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.main.deepBg};
+  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  padding: 8px 12px;
+`;
+
+const CloseButton = styled.button<StyledColorProps>`
+  background: ${({ theme, publishedTheme }) => publishedTheme?.select || theme.main.select};
+  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+`;
+
+const ToolBox = styled.ul`
+  display: flex;
+  align-items: center;
+  margin: ${({ theme }) =>
+    `${theme.metrics.s}px ${theme.metrics.s}px ${theme.metrics.s}px ${theme.metrics.l}px`};
+  list-style: none;
+  padding: 0;
+
+  @media (max-width: 768px) {
+    margin-left: ${({ theme }) => `${theme.metrics.s}px`};
+  }
+`;
+
+const PlayButton = styled.button<{ isRight?: boolean; isPlaying?: boolean } & StyledColorProps>`
+  border-radius: 50%;
+  border-width: 1px;
+  border-style: solid;
+  border-color: ${({ theme, isPlaying, publishedTheme }) =>
+    isPlaying ? publishedTheme?.select : publishedTheme?.mainText || theme.main.text};
+  width: 22px;
+  height: 22px;
+  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${({ isRight, theme }) => (isRight ? `${theme.metrics.s}px` : 0)};
+  background: ${({ isPlaying, publishedTheme, theme }) =>
+    isPlaying ? publishedTheme?.select || theme.main.select : "transparent"};
+
+  @media (max-width: 768px) {
+    margin-left: ${({ isRight, theme }) => (isRight ? `${theme.metrics.xs}px` : 0)};
+  }
+`;
+
+const InputRangeLabel = styled.label`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: ${({ theme }) => theme.metrics["2xs"]}px;
+`;
+
+const InputRangeLabelText = styled(Text)<StyledColorProps>`
+  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  /* space for preventing layout shift by increasing speed label. */
+  width: 37px;
+  text-align: right;
+  margin-right: ${({ theme }) => theme.metrics.s}px;
+`;
+
+const InputRange = styled.input<StyledColorProps>`
+  -webkit-appearance: none;
+  background: ${({ theme }) => theme.main.weak};
+  height: 1px;
+  width: 100px;
+  border: none;
+  ::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: ${({ theme, publishedTheme }) => publishedTheme?.select || theme.main.select};
+    height: 10px;
+    width: 10px;
+    border-radius: 50%;
+  }
+
+  @media (max-width: 768px) {
+    width: 74px;
+  }
+`;
+
+const CurrentTimeWrapper = styled.div`
+  border: ${({ theme }) => `1px solid ${theme.main.weak}`};
+  border-radius: 4px;
+  padding: ${({ theme }) => `0 ${theme.metrics.s}px`};
+  margin: ${({ theme }) => `${theme.metrics.xs}px 0`};
+  flex-shrink: 0;
+  width: 70px;
+
+  @media (max-width: 768px) {
+    display: none;
+  }
+`;
+
+const CurrentTime = styled(Text)<StyledColorProps>`
+  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  line-height: 16px;
+  white-space: pre-line;
+`;
+
+const ScaleBox = styled.div<{ shouldScroll: boolean }>`
+  border: ${({ theme }) => `${BORDER_WIDTH}px solid ${theme.main.weak}`};
+  border-radius: 5px;
+  box-sizing: border-box;
+  position: relative;
+  overflow-x: ${({ shouldScroll }) => (shouldScroll ? "overlay" : "hidden")};
+  overflow-y: hidden;
+  contain: strict;
+  width: 100%;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  transition: -webkit-scrollbar 1s;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  :hover::-webkit-scrollbar {
+    display: block;
+    height: 2px;
+  }
+  ::-webkit-scrollbar-track {
+    background-color: transparent;
+    background-color: red;
+    display: none;
+  }
+  ::-webkit-scrollbar-thumb {
+    border-radius: 5px;
+    background-color: ${({ theme }) => theme.colors.publish.dark.icon.main};
+  }
+  margin: ${({ theme }) =>
+    `${theme.metrics.xs}px ${theme.metrics.s}px ${theme.metrics.xs}px ${theme.metrics.xs}px`};
+
+  @media (max-width: 768px) {
+    margin-left: 0;
+  }
+`;
+
+const IconWrapper = styled.div<StyledColorProps>`
+  position: absolute;
+  top: 2px;
+  color: ${({ theme, publishedTheme }) => publishedTheme?.select || theme.main.select};
+`;
+
+export default Timeline;
diff --git a/web/src/beta/components/Timeline/types.ts b/web/src/beta/components/Timeline/types.ts
new file mode 100644
index 0000000000..cf95fa4bb3
--- /dev/null
+++ b/web/src/beta/components/Timeline/types.ts
@@ -0,0 +1,6 @@
+export type TimeEventHandler = (time: number) => void;
+
+export type Range = {
+  start: number;
+  end: number;
+};
diff --git a/web/src/beta/components/Timeline/utils.test.ts b/web/src/beta/components/Timeline/utils.test.ts
new file mode 100644
index 0000000000..4a5e9bd81f
--- /dev/null
+++ b/web/src/beta/components/Timeline/utils.test.ts
@@ -0,0 +1,28 @@
+import { expect, test } from "vitest";
+
+import { calcScaleInterval } from "./utils";
+
+test("calcScaleInterval()", () => {
+  expect(
+    calcScaleInterval(new Date("2023-01-02").getTime() - new Date("2023-01-01").getTime(), 1, {
+      gap: 10,
+      width: 300,
+    }),
+  ).toEqual({
+    gap: 10.358333333333333,
+    scaleCount: 24,
+    scaleInterval: 3600,
+    strongScaleMinutes: 10,
+  });
+  expect(
+    calcScaleInterval(new Date("2023-01-02").getTime() - new Date("2023-01-01").getTime(), 2, {
+      gap: 10,
+      width: 300,
+    }),
+  ).toEqual({
+    gap: 10,
+    scaleCount: 48,
+    scaleInterval: 1800,
+    strongScaleMinutes: 15,
+  });
+});
diff --git a/web/src/beta/components/Timeline/utils.ts b/web/src/beta/components/Timeline/utils.ts
new file mode 100644
index 0000000000..88082ccd8e
--- /dev/null
+++ b/web/src/beta/components/Timeline/utils.ts
@@ -0,0 +1,94 @@
+import {
+  BORDER_WIDTH,
+  EPOCH_SEC,
+  MINUTES_SEC,
+  NORMAL_SCALE_WIDTH,
+  PADDING_HORIZONTAL,
+  SCALE_LABEL_WIDTH,
+  STRONG_SCALE_WIDTH,
+} from "./constants";
+
+const MONTH_LABEL_LIST = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+export const formatDateForTimeline = (time: number, options: { detail?: boolean } = {}) => {
+  const d = new Date(time);
+  const year = d.getFullYear();
+  const month = MONTH_LABEL_LIST[d.getMonth()];
+  const date = `${d.getDate()}`.padStart(2, "0");
+  const hour = `${d.getHours()}`.padStart(2, "0");
+  if (!options.detail) {
+    return `${month} ${date} ${year} ${hour}:00:00.00`;
+  }
+  const minutes = `${d.getMinutes()}`.padStart(2, "0");
+  const seconds = `${d.getSeconds()}`.padStart(2, "0");
+  return `${month} ${date} ${year} ${hour}:${minutes}:${seconds}.00`;
+};
+
+const roundScaleInterval = (interval: number) => {
+  if (interval < 5) {
+    return 1;
+  }
+  if (5 <= interval && interval < 30) {
+    return 5 * Math.round(interval / 5);
+  }
+  if (30 <= interval && interval < 60) {
+    return 30 * Math.trunc(interval / 30);
+  }
+  return 60 * Math.round(interval / 60);
+};
+
+const DEFAULT_STRONG_SCALE_MINUTES = 10;
+const ADDITIONAL_STRONG_SCALE_MINUTES = 5;
+export const calcScaleInterval = (
+  rangeDiff: number,
+  zoom: number,
+  styles: { width: number; gap: number },
+) => {
+  const timelineWidth = styles.width - (PADDING_HORIZONTAL + BORDER_WIDTH) * 2;
+  const scaleWidth = styles.gap + NORMAL_SCALE_WIDTH;
+  // Get number of scale that fits to current timeline width.
+  const numberOfScales = Math.round(timelineWidth / scaleWidth) - 1;
+  // Scale interval to round time like 30 mins, 1 hour
+  const scaleInterval =
+    roundScaleInterval(rangeDiff / (MINUTES_SEC * EPOCH_SEC) / numberOfScales) * MINUTES_SEC;
+  const zoomedScaleInterval = Math.max(scaleInterval / zoom, MINUTES_SEC);
+
+  // convert epoch diff to minutes.
+  const scaleCount = rangeDiff / EPOCH_SEC / zoomedScaleInterval;
+
+  // Adjust scale space gap.
+  const strongScaleCount = scaleCount / DEFAULT_STRONG_SCALE_MINUTES - 1;
+  const initialDisplayedWidth =
+    (scaleCount - strongScaleCount) * scaleWidth +
+    strongScaleCount * (styles.gap + STRONG_SCALE_WIDTH);
+  const initialRemainingGap = (timelineWidth - initialDisplayedWidth) / scaleCount;
+
+  // To fit scale in initial width, adjusted gap is added only when zoom level is 1.
+  const nextGap = zoom === 1 ? styles.gap + initialRemainingGap : styles.gap;
+
+  // Adjust strong scale position
+  const diffLabelWidth = Math.max(SCALE_LABEL_WIDTH - nextGap * DEFAULT_STRONG_SCALE_MINUTES, 0);
+  const strongScaleMinutes =
+    DEFAULT_STRONG_SCALE_MINUTES +
+    Math.floor(diffLabelWidth / DEFAULT_STRONG_SCALE_MINUTES) * ADDITIONAL_STRONG_SCALE_MINUTES;
+
+  return {
+    scaleCount: Math.trunc(scaleCount),
+    scaleInterval: Math.trunc(zoomedScaleInterval),
+    strongScaleMinutes,
+    gap: nextGap,
+  };
+};
diff --git a/web/src/beta/core/Crust/Infobox/Block/DataList/index.stories.tsx b/web/src/beta/core/Crust/Infobox/Block/DataList/index.stories.tsx
new file mode 100644
index 0000000000..2887df21fd
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/DataList/index.stories.tsx
@@ -0,0 +1,56 @@
+import { Meta, Story } from "@storybook/react";
+
+import DataList, { Item, Props } from ".";
+
+export default {
+  component: DataList,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const items: Item[] = [
+  { id: "a", item_title: "Name", item_datastr: "Foo bar", item_datatype: "string" },
+  { id: "b", item_title: "Age", item_datanum: 20, item_datatype: "number" },
+  { id: "c", item_title: "Address", item_datastr: "New York", item_datatype: "string" },
+];
+
+const Template: Story<Props> = args => <DataList {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  block: { id: "", property: { items } },
+};
+
+export const Title = Template.bind({});
+Title.args = {
+  block: { id: "", property: { title: "Title", items } },
+};
+
+export const Typography: Story<Props> = Template.bind({});
+Typography.args = {
+  block: {
+    id: "",
+    property: {
+      typography: { color: "red", fontSize: 16 },
+      items,
+    },
+  },
+};
+
+export const NoItems: Story<Props> = Template.bind({});
+NoItems.args = { isEditable: true };
+
+export const Selected: Story<Props> = Template.bind({});
+Selected.args = { block: { id: "", property: { items } }, isSelected: true };
+
+export const Editable: Story<Props> = Template.bind({});
+Editable.args = {
+  block: { id: "", property: { items } },
+  isSelected: true,
+  isEditable: true,
+};
+
+export const Built: Story<Props> = Template.bind({});
+Built.args = {
+  block: { id: "", property: { items } },
+  isBuilt: true,
+};
diff --git a/web/src/beta/core/Crust/Infobox/Block/DataList/index.tsx b/web/src/beta/core/Crust/Infobox/Block/DataList/index.tsx
new file mode 100644
index 0000000000..59c74662af
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/DataList/index.tsx
@@ -0,0 +1,123 @@
+import React, { Fragment, useCallback, useState } from "react";
+
+import Icon from "@reearth/beta/components/Icon";
+import { Typography, typographyStyles } from "@reearth/beta/utils/value";
+import { styled } from "@reearth/services/theme";
+
+import { CommonProps as BlockProps } from "..";
+import { Border, Title } from "../utils";
+
+export type Props = BlockProps<Property>;
+
+export type Item = {
+  id: string;
+  item_title?: string;
+  item_datatype?: "string" | "number";
+  item_datastr?: string;
+  item_datanum?: number;
+};
+
+export type Property = {
+  title?: string;
+  typography?: Typography;
+  items?: Item[];
+};
+
+const DataList: React.FC<Props> = ({ block, infoboxProperty, isSelected, isEditable, onClick }) => {
+  const { items } = block?.property ?? {};
+  const { title, typography } = block?.property ?? {};
+  const isTemplate = !title && !items;
+
+  const [isHovered, setHovered] = useState(false);
+  const handleMouseEnter = useCallback(() => setHovered(true), []);
+  const handleMouseLeave = useCallback(() => setHovered(false), []);
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      onClick?.();
+    },
+    [onClick],
+  );
+
+  return (
+    <Wrapper
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      typography={typography}
+      isHovered={isHovered}
+      isEditable={isEditable}
+      isSelected={isSelected}>
+      {isTemplate && isEditable ? (
+        <Template>
+          <StyledIcon icon="dl" isHovered={isHovered} isSelected={isSelected} size={24} />
+        </Template>
+      ) : (
+        <>
+          {title && <Title infoboxProperty={infoboxProperty}>{title}</Title>}
+          <Dl>
+            {items?.map(i => (
+              <Fragment key={i.id}>
+                <Dt>{i.item_title}</Dt>
+                <Dd>{i.item_datatype === "number" ? i.item_datanum : i.item_datastr}</Dd>
+              </Fragment>
+            ))}
+          </Dl>
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(Border)<{
+  typography?: Typography;
+}>`
+  margin: 0 8px;
+  ${({ typography }) => typographyStyles({ ...typography })}
+  min-height: 70px;
+`;
+
+const Dl = styled.dl`
+  display: flex;
+  flex-wrap: wrap;
+  min-height: 15px;
+`;
+
+const Dt = styled.dt`
+  width: 30%;
+  padding: 10px;
+  padding-left: 0;
+  box-sizing: border-box;
+  font-weight: bold;
+  word-break: break-all;
+`;
+
+const Dd = styled.dd`
+  width: 70%;
+  margin: 0;
+  padding: 10px;
+  padding-right: 0;
+  box-sizing: border-box;
+`;
+
+const Template = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 185px;
+  margin: 0 auto;
+  user-select: none;
+`;
+
+const StyledIcon = styled(Icon)<{ isSelected?: boolean; isHovered?: boolean }>`
+  color: ${props =>
+    props.isHovered
+      ? props.theme.infoBox.border
+      : props.isSelected
+      ? props.theme.infoBox.accent2
+      : props.theme.infoBox.weakText};
+`;
+
+export default DataList;
diff --git a/web/src/beta/core/Crust/Infobox/Block/HTML/index.stories.tsx b/web/src/beta/core/Crust/Infobox/Block/HTML/index.stories.tsx
new file mode 100644
index 0000000000..576ec6bdc7
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/HTML/index.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta, Story } from "@storybook/react";
+
+import HTML, { Props } from ".";
+
+export default {
+  component: HTML,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <HTML {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  block: { id: "", property: { html: "<p style='color: red;'>aaaaaa</p>" } },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const Title = Template.bind({});
+Title.args = {
+  block: { id: "", property: { html: "<p style='color: red'>aaaaaa</p>", title: "Title" } },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const NoText = Template.bind({});
+NoText.args = {
+  isSelected: false,
+  isBuilt: false,
+  isEditable: true,
+};
diff --git a/web/src/beta/core/Crust/Infobox/Block/HTML/index.tsx b/web/src/beta/core/Crust/Infobox/Block/HTML/index.tsx
new file mode 100644
index 0000000000..6295344947
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/HTML/index.tsx
@@ -0,0 +1,260 @@
+import React, { useState, useEffect, useRef, useCallback, useLayoutEffect } from "react";
+
+import Icon from "@reearth/beta/components/Icon";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+import fonts from "@reearth/services/theme/fonts";
+
+import { CommonProps as BlockProps } from "..";
+import { Border } from "../utils";
+
+export type Props = BlockProps<Property>;
+
+export type Property = {
+  html?: string;
+  title?: string;
+};
+
+const HTMLBlock: React.FC<Props> = ({
+  block,
+  isSelected,
+  isEditable,
+  infoboxProperty,
+  theme,
+  onChange,
+  onClick,
+}) => {
+  const t = useT();
+  const { html, title } = block?.property ?? {};
+
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const isDirty = useRef(false);
+  const [editingText, setEditingText] = useState<string | undefined>();
+  const isEditing = typeof editingText === "string";
+  const isTemplate = !html && !title && !isEditing;
+
+  const startEditing = useCallback(() => {
+    if (!isEditable) return;
+    setEditingText(html ?? "");
+  }, [isEditable, html]);
+
+  const finishEditing = useCallback(() => {
+    if (!isEditing) return;
+    if (onChange && isDirty.current) {
+      onChange("default", "html", editingText ?? "", "string");
+    }
+    isDirty.current = false;
+    setEditingText(undefined);
+  }, [editingText, onChange, isEditing]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      setEditingText(e.currentTarget.value);
+      isDirty.current = true;
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (isEditing) {
+      ref.current?.focus();
+    }
+  }, [isEditing]);
+
+  const isSelectedPrev = useRef(false);
+  useEffect(() => {
+    if (isEditing && !isSelected && isSelectedPrev.current) {
+      finishEditing();
+    }
+  }, [finishEditing, isSelected, isEditing]);
+  useEffect(() => {
+    isSelectedPrev.current = !!isSelected;
+  }, [isSelected]);
+
+  const [isHovered, setHovered] = useState(false);
+  const handleMouseEnter = useCallback(() => setHovered(true), []);
+  const handleMouseLeave = useCallback(() => setHovered(false), []);
+  const handleClick = useCallback(
+    (e?: React.MouseEvent<HTMLDivElement>) => {
+      e?.stopPropagation();
+      if (isEditing) return;
+      onClick?.();
+    },
+    [isEditing, onClick],
+  );
+
+  // iframe
+  const themeColor = infoboxProperty?.typography?.color ?? theme?.mainText;
+  const [frameRef, setFrameRef] = useState<HTMLIFrameElement | null>(null);
+  const [height, setHeight] = useState(15);
+  const initializeIframe = useCallback(() => {
+    const frameDocument = frameRef?.contentDocument;
+    const frameWindow = frameRef?.contentWindow;
+    if (!frameWindow || !frameDocument) {
+      return;
+    }
+
+    if (!frameDocument.body.innerHTML.length) {
+      // `document.write()` is not recommended API by HTML spec,
+      // but we need to use this API to make it work correctly on Safari.
+      // If Safari supports `onLoad` event with `srcDoc`, we can remove this line.
+      frameDocument.write(html || "");
+    }
+
+    // Initialize styles
+    frameWindow.document.documentElement.style.margin = "0";
+
+    // Check if a style element has already been appended to the head
+    let style: HTMLElement | null = frameWindow.document.querySelector(
+      'style[data-id="reearth-iframe-style"]',
+    );
+    if (!style) {
+      // Create a new style element if it doesn't exist
+      style = frameWindow.document.createElement("style");
+      style.dataset.id = "reearth-iframe-style";
+      frameWindow.document.head.append(style);
+    }
+    // Update the content of the existing or new style element
+    style.textContent = `body { color:${themeColor ?? getComputedStyle(frameRef).color}; 
+    font-family:Noto Sans, hiragino sans, hiragino kaku gothic proN, -apple-system, BlinkMacSystem, sans-serif; 
+    font-size: ${fonts.sizes.s}px; } a { color:${themeColor ?? getComputedStyle(frameRef).color};}`;
+
+    const handleFrameClick = () => handleClick();
+
+    if (isEditable) {
+      frameWindow.document.body.style.cursor = "pointer";
+      frameWindow.document.addEventListener("dblclick", startEditing);
+      frameWindow.document.addEventListener("click", handleFrameClick);
+    }
+
+    const resize = () => {
+      setHeight(frameWindow.document.documentElement.scrollHeight);
+    };
+
+    // Resize
+    const resizeObserver = new ResizeObserver(() => {
+      resize();
+    });
+    resizeObserver.observe(frameWindow.document.body);
+
+    return () => {
+      frameWindow.document.removeEventListener("dblclick", startEditing);
+      frameWindow.document.removeEventListener("click", handleFrameClick);
+      resizeObserver.disconnect();
+    };
+  }, [frameRef, themeColor, isEditable, html, handleClick, startEditing]);
+
+  useLayoutEffect(() => initializeIframe(), [initializeIframe]);
+
+  return (
+    <Wrapper
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+      isSelected={isSelected}
+      isHovered={isHovered}
+      isEditable={isEditable}
+      isTemplate={isTemplate}>
+      {isTemplate && isEditable && !isEditing ? (
+        <Template onDoubleClick={startEditing}>
+          <StyledIcon icon="html" isSelected={isSelected} isHovered={isHovered} size={24} />
+          <Text isSelected={isSelected} isHovered={isHovered}>
+            {t("Double click here to write.")}
+          </Text>
+        </Template>
+      ) : (
+        <>
+          {title && <Title>{title}</Title>}
+          {isEditing ? (
+            <InputField
+              ref={ref}
+              value={editingText ?? ""}
+              onChange={handleChange}
+              onBlur={finishEditing}
+              rows={10}
+              minHeight={height}
+            />
+          ) : (
+            <IFrame
+              key={html}
+              ref={setFrameRef}
+              frameBorder="0"
+              scrolling="no"
+              $height={height}
+              allowFullScreen
+              sandbox="allow-same-origin allow-popups allow-forms"
+            />
+          )}
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(Border)<{
+  isTemplate: boolean;
+}>`
+  margin: 0 8px;
+  border: 1px solid
+    ${({ isSelected, isHovered, isTemplate, isEditable, theme }) =>
+      (!isTemplate && !isHovered && !isSelected) || !isEditable
+        ? "transparent"
+        : isHovered
+        ? theme.infoBox.border
+        : isSelected
+        ? theme.infoBox.accent2
+        : theme.infoBox.weakText};
+  border-radius: 6px;
+`;
+
+const Title = styled.div`
+  font-size: 12px;
+`;
+
+const IFrame = styled.iframe<{ $height: number }>`
+  display: block;
+  border: none;
+  padding: 5px;
+  height: ${({ $height }) => $height}px;
+  width: 100%;
+  min-width: 100%;
+  box-sizing: border-box;
+`;
+
+const InputField = styled.textarea<{ minHeight: number }>`
+  display: block;
+  width: 100%;
+  min-height: ${({ minHeight }) => minHeight}px;
+  height: 185px;
+  resize: none;
+  box-sizing: border-box;
+  background-color: transparent;
+  color: ${props => props.theme.infoBox.mainText};
+  font-size: ${fonts.sizes.s}px;
+  outline: none;
+  border: none;
+  padding: 4px;
+`;
+
+const Template = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 185px;
+  margin: 0 auto;
+  user-select: none;
+`;
+
+const Text = styled.p<{ isSelected?: boolean; isHovered?: boolean }>`
+  color: ${({ isSelected, isHovered, theme }) =>
+    isHovered ? theme.infoBox.border : isSelected ? theme.main.select : theme.infoBox.weakText};
+`;
+
+const StyledIcon = styled(Icon)<{ isSelected?: boolean; isHovered?: boolean }>`
+  color: ${({ isSelected, isHovered, theme }) =>
+    isHovered ? theme.infoBox.border : isSelected ? theme.main.select : theme.infoBox.weakText};
+`;
+
+export default HTMLBlock;
diff --git a/web/src/beta/core/Crust/Infobox/Block/Image/index.stories.tsx b/web/src/beta/core/Crust/Infobox/Block/Image/index.stories.tsx
new file mode 100644
index 0000000000..1a56381b62
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/Image/index.stories.tsx
@@ -0,0 +1,98 @@
+import { Meta, Story } from "@storybook/react";
+
+import Image, { Props } from ".";
+
+export default {
+  component: Image,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => (
+  <div style={{ background: "#fff" }}>
+    <Image {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  block: { id: "", property: { image: `/sample.svg` } },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const NoImage = Template.bind({});
+NoImage.args = {
+  isSelected: false,
+  isBuilt: false,
+  isEditable: true,
+};
+
+export const Title = Template.bind({});
+Title.args = {
+  block: {
+    id: "",
+    property: { image: `/sample.svg`, title: "Title" },
+  },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const FullSize = Template.bind({});
+FullSize.args = {
+  block: {
+    id: "",
+    property: { image: `/sample.svg`, fullSize: true },
+  },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const Cover = Template.bind({});
+Cover.args = {
+  block: {
+    id: "",
+    property: {
+      image: `/sample.svg`,
+      imageSize: "cover",
+      title: "Title",
+    },
+  },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const Contain = Template.bind({});
+Contain.args = {
+  block: {
+    id: "",
+    property: {
+      image: `/sample.svg`,
+      imageSize: "contain",
+      title: "Title",
+    },
+  },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const Position = Template.bind({});
+Position.args = {
+  block: {
+    id: "",
+    property: {
+      image: `/sample.svg`,
+      imageSize: "cover",
+      title: "Title",
+      imagePositionX: "left",
+      imagePositionY: "top",
+    },
+  },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
diff --git a/web/src/beta/core/Crust/Infobox/Block/Image/index.tsx b/web/src/beta/core/Crust/Infobox/Block/Image/index.tsx
new file mode 100644
index 0000000000..d6a791cc22
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/Image/index.tsx
@@ -0,0 +1,132 @@
+import React, { useCallback, useState } from "react";
+
+import Icon from "@reearth/beta/components/Icon";
+import { styled } from "@reearth/services/theme";
+
+import { CommonProps as BlockProps } from "..";
+import { Border, Title } from "../utils";
+
+export type Props = BlockProps<Property>;
+
+export type Property = {
+  image?: string;
+  title?: string;
+  fullSize?: boolean;
+  imageSize?: "contain" | "cover";
+  imagePositionX?: "left" | "center" | "right";
+  imagePositionY?: "top" | "center" | "bottom";
+};
+
+const ImageBlock: React.FC<Props> = ({
+  block,
+  infoboxProperty,
+  onClick,
+  isSelected,
+  isEditable,
+}) => {
+  const {
+    title,
+    fullSize,
+    image: src,
+    imageSize,
+    imagePositionX,
+    imagePositionY,
+  } = block?.property ?? {};
+  const { size: infoboxSize } = infoboxProperty ?? {};
+  const isTemplate = !src && !title;
+
+  const [isHovered, setHovered] = useState(false);
+  const handleMouseEnter = useCallback(() => setHovered(true), []);
+  const handleMouseLeave = useCallback(() => setHovered(false), []);
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      onClick?.();
+    },
+    [onClick],
+  );
+
+  return (
+    <Wrapper
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+      fullSize={fullSize}
+      infoboxSize={infoboxSize}
+      isHovered={isHovered}
+      isEditable={isEditable}
+      isSelected={isSelected}>
+      {title && <Title infoboxProperty={infoboxProperty}>{title}</Title>}
+      {isTemplate && isEditable ? (
+        <Template infoboxSize={infoboxSize}>
+          <StyledIcon icon="photooverlay" isHovered={isHovered} isSelected={isSelected} size={24} />
+        </Template>
+      ) : (
+        <Image
+          src={src}
+          fullSize={fullSize}
+          imageSize={imageSize}
+          imagePositionX={imagePositionX}
+          imagePositionY={imagePositionY}
+          isSelected={isSelected}
+          name={title}
+          infoboxSize={infoboxSize}
+        />
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(Border)<{
+  fullSize?: boolean;
+  infoboxSize?: string;
+}>`
+  margin: ${({ fullSize }) => (fullSize ? "0" : "0 8px")};
+  height: ${props => (props.infoboxSize === "large" ? "340px" : "200px")};
+`;
+
+const Image = styled.img<{
+  fullSize?: boolean;
+  imageSize?: "contain" | "cover";
+  imagePositionX?: "left" | "center" | "right";
+  imagePositionY?: "top" | "center" | "bottom";
+  isHovered?: boolean;
+  isSelected?: boolean;
+  name?: string;
+  infoboxSize?: string;
+}>`
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: ${props =>
+    props.infoboxSize === "large"
+      ? props.name
+        ? "326px"
+        : "340px"
+      : props.name
+      ? "181px"
+      : "200px"};
+  object-fit: ${({ imageSize }) => imageSize || "cover"};
+  object-position: ${({ imagePositionX, imagePositionY }) =>
+    `${imagePositionX || "center"} ${imagePositionY || "center"}`};
+  outline: none;
+`;
+
+const Template = styled.div<{ infoboxSize?: string }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${props => (props.infoboxSize === "large" ? "340px" : "200px")};
+`;
+
+const StyledIcon = styled(Icon)<{ isSelected?: boolean; isHovered?: boolean }>`
+  color: ${props =>
+    props.isHovered
+      ? props.theme.infoBox.border
+      : props.isSelected
+      ? props.theme.infoBox.accent2
+      : props.theme.infoBox.weakText};
+`;
+
+export default ImageBlock;
diff --git a/web/src/beta/core/Crust/Infobox/Block/Location/icon.svg b/web/src/beta/core/Crust/Infobox/Block/Location/icon.svg
new file mode 100644
index 0000000000..0351cf321e
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/Location/icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fillRule="evenodd" clipRule="evenodd"
+  d="M14.0292 22.7354C15.1183 21.8682 16.207 20.8883 17.226 19.8127C20.1976 16.676 22 13.3716 22 10C22 4.47715 17.5228 0 12 0C6.47715 0 2 4.47715 2 10C2 13.3716 3.8024 16.676 6.77405 19.8127C7.793 20.8883 8.88175 21.8682 9.97082 22.7354C10.3526 23.0394 10.7078 23.3081 11.0278 23.5392C11.2228 23.68 11.3649 23.7784 11.4453 23.8321C11.7812 24.056 12.2188 24.056 12.5547 23.8321C12.6351 23.7784 12.7772 23.68 12.9722 23.5392C13.2922 23.3081 13.6474 23.0394 14.0292 22.7354ZM15.774 18.4373C14.8242 19.4398 13.8036 20.3584 12.7833 21.1708C12.5048 21.3926 12.2423 21.5936 12 21.7726C11.7577 21.5936 11.4952 21.3926 11.2167 21.1708C10.1964 20.3584 9.17575 19.4398 8.22595 18.4373C5.5726 15.6365 4 12.7534 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 12.7534 18.4274 15.6365 15.774 18.4373ZM12 14C9.79086 14 8 12.2091 8 10C8 7.79086 9.79086 6 12 6C14.2091 6 16 7.79086 16 10C16 12.2091 14.2091 14 12 14ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z"
+  fill="#00A0E8" />
+</svg>
diff --git a/web/src/beta/core/Crust/Infobox/Block/Location/index.stories.tsx b/web/src/beta/core/Crust/Infobox/Block/Location/index.stories.tsx
new file mode 100644
index 0000000000..9883f60140
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/Location/index.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta, Story } from "@storybook/react";
+
+import Location, { Props } from ".";
+
+export default {
+  component: Location,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Location {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  block: { id: "", property: { location: { lat: 0, lng: 0 } } },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const Title = Template.bind({});
+Title.args = {
+  block: { id: "", property: { location: { lat: 0, lng: 0 }, title: "Location" } },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const NoLocation = Template.bind({});
+NoLocation.args = {
+  isSelected: false,
+  isBuilt: false,
+  isEditable: true,
+};
diff --git a/web/src/beta/core/Crust/Infobox/Block/Location/index.tsx b/web/src/beta/core/Crust/Infobox/Block/Location/index.tsx
new file mode 100644
index 0000000000..893174b9ae
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/Location/index.tsx
@@ -0,0 +1,115 @@
+import L from "leaflet";
+import React, { useMemo, useCallback, useRef, useState } from "react";
+import { MapContainer, TileLayer, Marker } from "react-leaflet";
+import "leaflet/dist/leaflet.css";
+
+import { styled } from "@reearth/services/theme";
+
+import { CommonProps as BlockProps, LatLng } from "..";
+import { Border, Title } from "../utils";
+
+import iconSvg from "./icon.svg?raw";
+
+export type Props = BlockProps<Property>;
+
+export type Property = {
+  location?: LatLng;
+  title?: string;
+  fullSize?: boolean;
+};
+
+const defaultCenter = { lat: 0, lng: 0 };
+
+export default function LocationBlock({
+  block,
+  infoboxProperty,
+  isBuilt,
+  isSelected,
+  isEditable,
+  onClick,
+  onChange,
+}: Props): JSX.Element {
+  const { location, title, fullSize } = block?.property ?? {};
+  const { size: infoboxSize } = infoboxProperty ?? {};
+
+  const handleChange = useCallback(
+    ({ lat, lng }: { lat: number; lng: number }) => {
+      if (isBuilt || !isEditable) return;
+      onChange?.("default", "location", { lat, lng }, "latlng");
+    },
+    [isBuilt, isEditable, onChange],
+  );
+
+  const [isHovered, setHovered] = useState(false);
+  const handleMouseEnter = useCallback(() => setHovered(true), []);
+  const handleMouseLeave = useCallback(() => setHovered(false), []);
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      onClick?.();
+    },
+    [onClick],
+  );
+
+  const markerRef = useRef<L.Marker<any>>(null);
+  const eventHandlers = useMemo(
+    () => ({
+      dragend() {
+        const marker = markerRef.current;
+        if (marker) {
+          handleChange(marker.getLatLng());
+        }
+      },
+    }),
+    [handleChange],
+  );
+
+  return (
+    <Wrapper
+      fullSize={fullSize}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      isHovered={isHovered}
+      isEditable={isEditable}
+      isSelected={isSelected}>
+      {title && <Title infoboxProperty={infoboxProperty}>{title}</Title>}
+      <MapContainer
+        style={{
+          height: infoboxSize === "large" ? (title ? "236px" : "250px") : title ? "232px" : "250px",
+          overflow: "hidden",
+          zIndex: 1,
+        }}
+        center={location ?? defaultCenter}
+        zoom={13}>
+        <TileLayer
+          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {location && (
+          <Marker
+            icon={icon}
+            position={location}
+            draggable={!isBuilt && isEditable}
+            eventHandlers={eventHandlers}
+            ref={markerRef}
+          />
+        )}
+      </MapContainer>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled(Border)<{
+  fullSize?: boolean;
+}>`
+  margin: ${({ fullSize }) => (fullSize ? "0" : "0 8px")};
+  border-radius: 6px;
+  height: 250px;
+  color: #000000;
+`;
+
+const icon = L.divIcon({
+  className: "custom-icon",
+  html: iconSvg,
+});
diff --git a/web/src/beta/core/Crust/Infobox/Block/Text/index.stories.tsx b/web/src/beta/core/Crust/Infobox/Block/Text/index.stories.tsx
new file mode 100644
index 0000000000..892f352eac
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/Text/index.stories.tsx
@@ -0,0 +1,65 @@
+import { Meta, Story } from "@storybook/react";
+
+import Text, { Props } from ".";
+
+export default {
+  component: Text,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const markdownText = `
+# Hello
+This is **markdown**.
+## H2
+### H3
+#### H4
+##### H5
+`;
+
+const Template: Story<Props> = args => <Text {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  block: { id: "", property: { text: "aaaaaa" } },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const Title = Template.bind({});
+Title.args = {
+  block: { id: "", property: { text: "aaaaaa", title: "Title" } },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const Markdown = Template.bind({});
+Markdown.args = {
+  block: { id: "", property: { text: markdownText, markdown: true } },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const Typography = Template.bind({});
+Typography.args = {
+  block: {
+    id: "",
+    property: {
+      text: markdownText,
+      markdown: true,
+      typography: { color: "red", fontSize: 16 },
+    },
+  },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const NoText = Template.bind({});
+NoText.args = {
+  isSelected: false,
+  isBuilt: false,
+  isEditable: true,
+};
diff --git a/web/src/beta/core/Crust/Infobox/Block/Text/index.tsx b/web/src/beta/core/Crust/Infobox/Block/Text/index.tsx
new file mode 100644
index 0000000000..eb0cd843cf
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/Text/index.tsx
@@ -0,0 +1,223 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import nl2br from "react-nl2br";
+
+import Icon from "@reearth/beta/components/Icon";
+import Markdown from "@reearth/beta/components/Markdown";
+import { useT } from "@reearth/services/i18n";
+import { styled, useTheme } from "@reearth/services/theme";
+import fonts from "@reearth/services/theme/fonts";
+
+import { CommonProps as BlockProps, Typography } from "..";
+import { Border, typographyStyles } from "../utils";
+
+export type Props = BlockProps<Property>;
+
+export type Property = {
+  text?: string;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  title?: string;
+  markdown?: boolean;
+  typography?: Typography;
+};
+
+const TextBlock: React.FC<Props> = ({
+  block,
+  infoboxProperty,
+  isSelected,
+  isEditable,
+  onChange,
+  onClick,
+}) => {
+  const t = useT();
+  const theme = useTheme();
+  const {
+    text,
+    title,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    markdown,
+    typography,
+  } = block?.property ?? {};
+  const { bgcolor: bg } = infoboxProperty ?? {};
+
+  const ref = useRef<HTMLTextAreaElement>(null);
+  const isDirty = useRef(false);
+  const [editingText, setEditingText] = useState<string | undefined>();
+  const isEditing = typeof editingText === "string";
+  const isTemplate = !text && !title && !isEditing;
+
+  const startEditing = useCallback(() => {
+    if (!isEditable) return;
+    setEditingText(text ?? "");
+  }, [isEditable, text]);
+
+  const finishEditing = useCallback(() => {
+    if (!isEditing) return;
+    if (onChange && isDirty.current) {
+      onChange("default", "text", editingText ?? "", "string");
+    }
+    isDirty.current = false;
+    setEditingText(undefined);
+  }, [editingText, onChange, isEditing]);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+      setEditingText(e.currentTarget.value);
+      isDirty.current = true;
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (isEditing) {
+      ref.current?.focus();
+    }
+  }, [isEditing]);
+
+  const isSelectedPrev = useRef(false);
+  useEffect(() => {
+    if (isEditing && !isSelected && isSelectedPrev.current) {
+      finishEditing();
+    }
+  }, [finishEditing, isSelected, isEditing]);
+  useEffect(() => {
+    isSelectedPrev.current = !!isSelected;
+  }, [isSelected]);
+
+  const [isHovered, setHovered] = useState(false);
+  const handleMouseEnter = useCallback(() => setHovered(true), []);
+  const handleMouseLeave = useCallback(() => setHovered(false), []);
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      if (isEditing) return;
+      onClick?.();
+    },
+    [isEditing, onClick],
+  );
+
+  return (
+    <Wrapper
+      paddingTop={paddingTop}
+      paddingBottom={paddingBottom}
+      paddingLeft={paddingLeft}
+      paddingRight={paddingRight}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      onClick={handleClick}
+      isSelected={isSelected}
+      isHovered={isHovered}
+      isEditable={isEditable}
+      isTemplate={isTemplate}>
+      {isTemplate && isEditable && !isEditing ? (
+        <Template onDoubleClick={startEditing}>
+          <StyledIcon icon="text" isSelected={isSelected} isHovered={isHovered} size={24} />
+          <Text isSelected={isSelected} isHovered={isHovered}>
+            {t("Double click here to write.")}
+          </Text>
+        </Template>
+      ) : (
+        <>
+          {title && <Title>{title}</Title>}
+          {isEditing ? (
+            <InputField
+              ref={ref}
+              value={editingText ?? ""}
+              onChange={handleChange}
+              onBlur={finishEditing}
+              rows={10}
+            />
+          ) : markdown ? (
+            <Markdown
+              styles={typography}
+              backgroundColor={bg || theme.infoBox.bg}
+              onDoubleClick={startEditing}>
+              {text}
+            </Markdown>
+          ) : (
+            <Field styles={typography} onDoubleClick={startEditing}>
+              {nl2br(text ?? "")}
+            </Field>
+          )}
+        </>
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(Border)<{
+  isTemplate: boolean;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+}>`
+  padding-top: ${({ paddingTop }) => (paddingTop ? paddingTop + "px" : "0")};
+  padding-bottom: ${({ paddingBottom }) => (paddingBottom ? paddingBottom + "px" : "0")};
+  padding-left: ${({ paddingLeft }) => (paddingLeft ? paddingLeft + "px" : "0")};
+  padding-right: ${({ paddingRight }) => (paddingRight ? paddingRight + "px" : "0")};
+  margin: 0 8px;
+  border: 1px solid
+    ${({ isSelected, isHovered, isTemplate, isEditable, theme }) =>
+      (!isTemplate && !isHovered && !isSelected) || !isEditable
+        ? "transparent"
+        : isHovered
+        ? theme.infoBox.border
+        : isSelected
+        ? theme.infoBox.accent2
+        : theme.infoBox.weakText};
+  border-radius: 6px;
+`;
+
+const Title = styled.div`
+  font-size: 12px;
+`;
+
+const Field = styled.div<{ styles?: Typography }>`
+  ${({ styles }) => typographyStyles(styles)}
+  padding: 5px;
+  min-height: 15px;
+`;
+
+const InputField = styled.textarea`
+  display: block;
+  width: 100%;
+  min-height: 15px;
+  height: 185px;
+  resize: none;
+  box-sizing: border-box;
+  background-color: transparent;
+  color: ${props => props.theme.infoBox.mainText};
+  font-size: ${fonts.sizes.s}px;
+  outline: none;
+  border: none;
+  padding: 4px;
+`;
+
+const Template = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  height: 185px;
+  margin: 0 auto;
+  user-select: none;
+`;
+
+const Text = styled.p<{ isSelected?: boolean; isHovered?: boolean }>`
+  color: ${({ isSelected, isHovered, theme }) =>
+    isHovered ? theme.infoBox.border : isSelected ? theme.main.select : theme.infoBox.weakText};
+`;
+
+const StyledIcon = styled(Icon)<{ isSelected?: boolean; isHovered?: boolean }>`
+  color: ${({ isSelected, isHovered, theme }) =>
+    isHovered ? theme.infoBox.border : isSelected ? theme.main.select : theme.infoBox.weakText};
+`;
+
+export default TextBlock;
diff --git a/web/src/beta/core/Crust/Infobox/Block/Video/index.stories.tsx b/web/src/beta/core/Crust/Infobox/Block/Video/index.stories.tsx
new file mode 100644
index 0000000000..6cb963081d
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/Video/index.stories.tsx
@@ -0,0 +1,36 @@
+import { Meta, Story } from "@storybook/react";
+
+import Video, { Props } from ".";
+
+export default {
+  component: Video,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Video {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  block: { id: "", property: { url: "https://www.youtube.com/watch?v=oUFJJNQGwhk" } },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const Title = Template.bind({});
+Title.args = {
+  block: {
+    id: "",
+    property: { url: "https://www.youtube.com/watch?v=oUFJJNQGwhk", title: "Video" },
+  },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const NoVideo = Template.bind({});
+NoVideo.args = {
+  isSelected: false,
+  isBuilt: false,
+  isEditable: true,
+};
diff --git a/web/src/beta/core/Crust/Infobox/Block/Video/index.tsx b/web/src/beta/core/Crust/Infobox/Block/Video/index.tsx
new file mode 100644
index 0000000000..310d67d362
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/Video/index.tsx
@@ -0,0 +1,114 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import Player from "react-player";
+
+import Icon from "@reearth/beta/components/Icon";
+import { styled } from "@reearth/services/theme";
+
+import { CommonProps as BlockProps } from "..";
+import { Border, Title } from "../utils";
+
+export type Props = BlockProps<Property>;
+
+export type Property = {
+  url?: string;
+  title?: string;
+  fullSize?: boolean;
+};
+
+const VideoBlock: React.FC<Props> = ({
+  block,
+  infoboxProperty,
+  isSelected,
+  isEditable,
+  onClick,
+}) => {
+  const { url: videoUrl, fullSize, title } = block?.property ?? {};
+  const { size: infoboxSize } = infoboxProperty ?? {};
+  const isTemplate = !videoUrl && !title;
+
+  const ref = useRef<Player>(null);
+
+  useEffect(() => {
+    // detect click event on video iframe
+    const cb = () => {
+      const player = ref.current?.getInternalPlayer() as any;
+      if (!player) return;
+      const internal = player.getIframe?.() as HTMLIFrameElement | undefined;
+      if (document.activeElement == internal) {
+        onClick?.();
+      }
+    };
+    window.addEventListener("blur", cb);
+    return () => window.removeEventListener("blur", cb);
+  }, [onClick, isSelected]);
+
+  const [isHovered, setHovered] = useState(false);
+  const handleMouseEnter = useCallback(() => setHovered(true), []);
+  const handleMouseLeave = useCallback(() => setHovered(false), []);
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      e.stopPropagation();
+      onClick?.();
+    },
+    [onClick],
+  );
+
+  return (
+    <Wrapper
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      isEditable={isEditable}
+      isSelected={isSelected}
+      isHovered={isHovered}
+      fullSize={fullSize}
+      infoboxSize={infoboxSize}>
+      {title && <Title infoboxProperty={infoboxProperty}>{title}</Title>}
+      {isTemplate && isEditable ? (
+        <Template infoboxSize={infoboxSize}>
+          <StyledIcon icon="video" isHovered={isHovered} isSelected={isSelected} size={24} />
+        </Template>
+      ) : (
+        <Player
+          ref={ref}
+          url={videoUrl}
+          width="100%"
+          height={infoboxSize === "large" ? (title ? "326px" : "340px") : title ? "185px" : "200px"}
+          playsinline
+          pip
+          controls
+          preload
+          isHovered={isHovered}
+          isSelected={isSelected}
+        />
+      )}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled(Border)<{
+  fullSize?: boolean;
+  infoboxSize?: string;
+}>`
+  margin: ${({ fullSize }) => (fullSize ? "0" : "0 8px")};
+  height: ${props => (props.infoboxSize === "large" ? "340px" : "200px")};
+`;
+
+const Template = styled.div<{ infoboxSize?: string }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: ${props => (props.infoboxSize === "large" ? "340px" : "200px")};
+  border-radius: 3px;
+`;
+
+const StyledIcon = styled(Icon)<{ isSelected?: boolean; isHovered?: boolean }>`
+  color: ${props =>
+    props.isHovered
+      ? props.theme.infoBox.border
+      : props.isSelected
+      ? props.theme.infoBox.accent2
+      : props.theme.infoBox.weakText};
+`;
+
+export default VideoBlock;
diff --git a/web/src/beta/core/Crust/Infobox/Block/builtin.ts b/web/src/beta/core/Crust/Infobox/Block/builtin.ts
new file mode 100644
index 0000000000..9b65473a21
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/builtin.ts
@@ -0,0 +1,19 @@
+import DataList from "./DataList";
+import HTML from "./HTML";
+import Image from "./Image";
+import Location from "./Location";
+import Text from "./Text";
+import Video from "./Video";
+
+import type { Component } from ".";
+
+const builtin: Record<string, Component> = {
+  "reearth/dlblock": DataList,
+  "reearth/imageblock": Image,
+  "reearth/locationblock": Location,
+  "reearth/textblock": Text,
+  "reearth/videoblock": Video,
+  "reearth/htmlblock": HTML,
+};
+
+export default builtin;
diff --git a/web/src/beta/core/Crust/Infobox/Block/index.stories.tsx b/web/src/beta/core/Crust/Infobox/Block/index.stories.tsx
new file mode 100644
index 0000000000..82423cfc58
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/index.stories.tsx
@@ -0,0 +1,21 @@
+import { Meta, Story } from "@storybook/react";
+
+import Component, { Props } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => <Component {...args} />;
+Default.args = {
+  block: {
+    id: "",
+    pluginId: "reearth",
+    extensionId: "textblock",
+    property: { text: "hogehoge" },
+  },
+  isSelected: false,
+  isBuilt: false,
+  isEditable: false,
+};
diff --git a/web/src/beta/core/Crust/Infobox/Block/index.tsx b/web/src/beta/core/Crust/Infobox/Block/index.tsx
new file mode 100644
index 0000000000..8da9162921
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/index.tsx
@@ -0,0 +1,64 @@
+import type { ComponentType, ReactNode } from "react";
+
+import type { Layer } from "@reearth/beta/core/mantle";
+import type { ValueType, ValueTypes } from "@reearth/beta/utils/value";
+import { styled } from "@reearth/services/theme";
+
+import { Theme } from "../../types";
+import type { Block, BlockProps, InfoboxProperty } from "../types";
+
+import builtin from "./builtin";
+
+export type { InfoboxProperty, Typography, LatLng } from "../types";
+
+export type Props<BP = any> = {
+  renderBlock?: (block: BlockProps) => ReactNode;
+  layer?: Layer;
+} & CommonProps<BP>;
+
+export type CommonProps<BP = any> = {
+  isEditable?: boolean;
+  isBuilt?: boolean;
+  isSelected?: boolean;
+  block?: Block<BP>;
+  infoboxProperty?: InfoboxProperty;
+  theme?: Theme;
+  onClick?: () => void;
+  onChange?: <T extends ValueType>(
+    schemaItemId: string,
+    fieldId: string,
+    value: ValueTypes[T],
+    type: T,
+  ) => void;
+};
+
+export type Component<BP = any> = ComponentType<CommonProps<BP>>;
+
+export default function BlockComponent<P = any>({
+  renderBlock,
+  ...props
+}: Props<P>): JSX.Element | null {
+  const Builtin =
+    props.block?.pluginId && props.block.extensionId
+      ? builtin[`${props.block.pluginId}/${props.block.extensionId}`]
+      : undefined;
+
+  return Builtin ? (
+    <Builtin {...props} />
+  ) : props.block ? (
+    <Wrapper editable={props?.isEditable} onClick={props?.onClick} selected={props?.isSelected}>
+      {renderBlock?.({ block: props.block, layer: props.layer, onClick: props.onClick })}
+    </Wrapper>
+  ) : null;
+}
+
+const Wrapper = styled.div<{ editable?: boolean; selected?: boolean }>`
+  border: 1px solid
+    ${({ selected, editable, theme }) =>
+      editable && selected ? theme.infoBox.accent2 : "transparent"};
+  border-radius: 6px;
+
+  &:hover {
+    border-color: ${({ editable, theme }) => (editable ? theme.infoBox.border : null)};
+  }
+`;
diff --git a/web/src/beta/core/Crust/Infobox/Block/utils.ts b/web/src/beta/core/Crust/Infobox/Block/utils.ts
new file mode 100644
index 0000000000..fb49181f1b
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Block/utils.ts
@@ -0,0 +1,31 @@
+import { styled } from "@reearth/services/theme";
+import fonts from "@reearth/services/theme/fonts";
+
+import { InfoboxProperty } from "../types";
+
+import { typographyStyles } from "./utils";
+
+export { typographyStyles } from "../utils";
+
+export const Title = styled.div<{ infoboxProperty?: InfoboxProperty }>`
+  color: ${props => props.theme.infoBox.mainText};
+  font-size: ${fonts.sizes.xs}px;
+  ${({ infoboxProperty }) => typographyStyles(infoboxProperty?.typography)}
+`;
+
+export const Border = styled.div<{
+  isSelected?: boolean;
+  isHovered?: boolean;
+  isEditable?: boolean;
+}>`
+  border: 1px solid
+    ${({ isSelected, isHovered, isEditable, theme }) =>
+      (!isHovered && !isSelected) || !isEditable
+        ? "transparent"
+        : isHovered
+        ? theme.infoBox.border
+        : isSelected
+        ? theme.infoBox.accent2
+        : theme.infoBox.weakText};
+  border-radius: 6px;
+`;
diff --git a/web/src/beta/core/Crust/Infobox/Field/hooks.ts b/web/src/beta/core/Crust/Infobox/Field/hooks.ts
new file mode 100644
index 0000000000..09d1d3c439
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Field/hooks.ts
@@ -0,0 +1,86 @@
+import { useState, useRef, useMemo } from "react";
+
+import { useDrag, useDrop, DropOptions } from "@reearth/beta/utils/use-dnd";
+
+export default ({
+  id,
+  index,
+  onMove,
+}: {
+  id?: string;
+  index?: number;
+  onMove?: (blockId: string, fromIndex: number, toIndex: number) => void;
+}) => {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const isHoveredRef = useRef<"top" | "bottom">();
+  const [isHovered, setHovered] = useState<"top" | "bottom">();
+
+  const {
+    ref: dragRef,
+    isDragging,
+    previewRef,
+  } = useDrag<"block">(
+    id && typeof index === "number"
+      ? {
+          type: "block",
+          id,
+          index,
+        }
+      : undefined,
+    false,
+    (_item, dropper) => {
+      if (!dropper || !onMove || !id || dropper.type !== "block" || typeof index !== "number")
+        return;
+      onMove(id, index, dropper.index);
+    },
+  );
+
+  const { ref: dropRef } = useDrop(
+    useMemo<DropOptions<"block">>(
+      () => ({
+        accept: ["block"],
+        canDrop: item => item.id !== id,
+        hover(_item, context) {
+          if (!context.canDrop || !context.position) {
+            isHoveredRef.current = undefined;
+            setHovered(undefined);
+            return;
+          }
+
+          const r = context.position.y / context.position.h;
+          const hovered = r >= 0 && r <= 1 ? (r <= 0.5 ? "top" : "bottom") : undefined;
+
+          setHovered(hovered);
+          isHoveredRef.current = hovered;
+        },
+        drop(item) {
+          const hovered = isHoveredRef.current;
+          setHovered(undefined);
+          isHoveredRef.current = undefined;
+          if (item.type !== "block" || !id || typeof index !== "number") return;
+          const newIndex = index + (item.index <= index ? 0 : hovered === "bottom" ? 1 : 0);
+          if (newIndex === item.index) {
+            return; // not moved
+          }
+          return {
+            type: "block",
+            id: id,
+            index: newIndex,
+          };
+        },
+        wrapperRef,
+      }),
+      [id, index],
+    ),
+  );
+
+  dropRef(wrapperRef);
+
+  return {
+    isHovered,
+    dragRef,
+    dropRef: wrapperRef,
+    previewRef,
+    isDragging,
+  };
+};
diff --git a/web/src/beta/core/Crust/Infobox/Field/index.stories.tsx b/web/src/beta/core/Crust/Infobox/Field/index.stories.tsx
new file mode 100644
index 0000000000..74b8dd61a8
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Field/index.stories.tsx
@@ -0,0 +1,28 @@
+import { Meta, Story } from "@storybook/react";
+
+import Field, { Props } from ".";
+
+export default {
+  component: Field,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => (
+  <Field {...args}>
+    <h1>HogeHoge</h1>
+  </Field>
+);
+Default.args = {
+  id: "aaa",
+};
+
+export const Selected: Story<Props> = args => (
+  <Field {...args}>
+    <h1>HogeHoge</h1>
+  </Field>
+);
+Selected.args = {
+  id: "aaa",
+  isEditable: true,
+  isSelected: true,
+};
diff --git a/web/src/beta/core/Crust/Infobox/Field/index.tsx b/web/src/beta/core/Crust/Infobox/Field/index.tsx
new file mode 100644
index 0000000000..bc5ec18578
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Field/index.tsx
@@ -0,0 +1,130 @@
+import { ReactNode, useState } from "react";
+
+import Icon from "@reearth/beta/components/Icon";
+import InsertionBar from "@reearth/beta/components/InsertionBar";
+import { styled } from "@reearth/services/theme";
+
+import useHooks from "./hooks";
+
+export type Props = {
+  children?: ReactNode;
+  id?: string;
+  index?: number;
+  isEditable?: boolean;
+  isBuilt?: boolean;
+  isSelected?: boolean;
+  insertionPopUpPosition?: "top" | "bottom";
+  isInfoboxHovered?: boolean;
+  dragDisabled?: boolean;
+  renderInsertionPopUp?: React.ReactNode;
+  onInsert?: (pos: "top" | "bottom") => void;
+  onMove?: (blockId: string, fromIndex: number, toIndex: number) => void;
+};
+
+export default function Field({
+  children,
+  id,
+  index,
+  isEditable,
+  isBuilt,
+  isSelected,
+  renderInsertionPopUp,
+  insertionPopUpPosition,
+  dragDisabled,
+  onMove,
+  onInsert,
+}: Props): JSX.Element | null {
+  const { dragRef, dropRef, isHovered, isDragging, previewRef } = useHooks({
+    id,
+    index,
+    onMove,
+  });
+  const [hover, setHover] = useState(false);
+
+  return (
+    <Wrapper ref={dropRef}>
+      <BlockWrapper
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        isDragging={isDragging}
+        isEditable={isEditable && !isBuilt}
+        ref={previewRef}>
+        {children}
+        {isEditable && !isBuilt && !dragDisabled && hover && (
+          <Handle
+            ref={dragRef}
+            isHovered={!!isEditable && !isBuilt && hover && !isSelected}
+            isSelected={!!isEditable && !isBuilt && !!isSelected}>
+            <Icon icon="arrowUpDown" size={24} />
+          </Handle>
+        )}
+      </BlockWrapper>
+      {!isBuilt && isEditable && (
+        <>
+          <InsertionBar
+            mode={
+              isEditable && isHovered === "top"
+                ? "dragging"
+                : isEditable && !isHovered && index === 0
+                ? "visible"
+                : "hidden"
+            }
+            pos="top"
+            onButtonClick={() => onInsert?.("top")}>
+            {insertionPopUpPosition === "top" && renderInsertionPopUp}
+          </InsertionBar>
+          <InsertionBar
+            mode={
+              isEditable && isHovered === "bottom"
+                ? "dragging"
+                : !isEditable || isHovered
+                ? "hidden"
+                : "visible"
+            }
+            pos="bottom"
+            onButtonClick={() => onInsert?.("bottom")}>
+            {insertionPopUpPosition === "bottom" && renderInsertionPopUp}
+          </InsertionBar>
+        </>
+      )}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  position: relative;
+  margin: 0;
+  padding: 10px 0;
+  border-radius: 6px;
+`;
+
+const BlockWrapper = styled.div<{
+  isDragging?: boolean;
+  isEditable?: boolean;
+}>`
+  position: relative;
+  opacity: ${props => (props.isDragging ? "0.4" : "1")};
+  cursor: ${props => (props.isEditable ? "pointer" : "")};
+  box-sizing: border-box;
+`;
+
+const Handle = styled.div<{ isHovered: boolean; isSelected: boolean }>`
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  right: 0;
+  padding: 5px;
+  margin: 3px 6px;
+  color: ${props =>
+    props.isHovered
+      ? props.theme.infoBox.border
+      : props.isSelected
+      ? props.theme.infoBox.accent2
+      : "none"};
+  cursor: grab;
+  user-select: none;
+
+  &:active {
+    cursor: grabbing;
+  }
+`;
diff --git a/web/src/beta/core/Crust/Infobox/Frame/index.stories.tsx b/web/src/beta/core/Crust/Infobox/Frame/index.stories.tsx
new file mode 100644
index 0000000000..6045a8b2f1
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Frame/index.stories.tsx
@@ -0,0 +1,30 @@
+import { Meta, Story } from "@storybook/react";
+
+import Component, { Props } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  title: "hello",
+  visible: true,
+};
+
+export const LongTitle = Template.bind({});
+LongTitle.args = {
+  title:
+    "hellohellohellohellohellohellohellohellohellohhellohellohellohellohellohellohellohellohellohellohhellohellohellohellohellohellohellohellohellohellohhello",
+  visible: true,
+};
+
+export const LongCJKTitle = Template.bind({});
+LongCJKTitle.args = {
+  title:
+    "こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。",
+  visible: true,
+};
diff --git a/web/src/beta/core/Crust/Infobox/Frame/index.tsx b/web/src/beta/core/Crust/Infobox/Frame/index.tsx
new file mode 100644
index 0000000000..d857c828e0
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/Frame/index.tsx
@@ -0,0 +1,321 @@
+import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useClickAway, useMedia } from "react-use";
+
+import Flex from "@reearth/beta/components/Flex";
+import FloatedPanel from "@reearth/beta/components/FloatedPanel";
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import { styled, css, fonts, metricsSizes } from "@reearth/services/theme";
+
+import type { Theme } from "../types";
+import { type Typography, typographyStyles } from "../utils";
+
+export type Props = {
+  className?: string;
+  children?: ReactNode;
+  infoboxKey?: string;
+  theme?: Theme;
+  title?: string;
+  height?: number;
+  outlineColor?: string;
+  outlineWidth?: number;
+  heightType?: "auto" | "manual";
+  size?: "small" | "medium" | "large";
+  position?: "right" | "middle" | "left";
+  visible?: boolean;
+  unselectOnClose?: boolean;
+  noContent?: boolean;
+  useMask?: boolean;
+  typography?: Typography;
+  backgroundColor?: string;
+  showTitle?: boolean;
+  paddingTop?: number;
+  paddingRight?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  onMaskClick?: () => void;
+  onClick?: () => void;
+  onClickAway?: () => void;
+  onEnter?: () => void;
+  onEntered?: () => void;
+  onExit?: () => void;
+  onExited?: () => void;
+  onClose?: () => void;
+};
+
+const Frame: React.FC<Props> = ({
+  className,
+  infoboxKey,
+  theme: publishedTheme,
+  title,
+  size,
+  height,
+  heightType,
+  position,
+  outlineColor,
+  outlineWidth,
+  visible,
+  unselectOnClose,
+  noContent,
+  useMask,
+  typography,
+  backgroundColor,
+  showTitle,
+  children,
+  paddingTop,
+  paddingRight,
+  paddingBottom,
+  paddingLeft,
+  onMaskClick,
+  onClick,
+  onClickAway,
+  onEnter,
+  onEntered,
+  onExit,
+  onExited,
+  onClose,
+}) => {
+  const isSmallWindow = useMedia("(max-width: 624px)");
+  const ref = useRef<HTMLDivElement>(null);
+  const ref2 = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(true);
+  const [showMask, setShowMask] = useState<boolean | undefined>(false);
+  useClickAway(ref, () => onClickAway?.());
+
+  const handleOpen = useCallback(() => {
+    if (open || (noContent && isSmallWindow)) return;
+    setOpen(true);
+  }, [open, noContent, isSmallWindow]);
+
+  const handleClose = useCallback(() => {
+    if (!unselectOnClose) {
+      setOpen(false);
+    }
+    onClose?.();
+  }, [onClose, unselectOnClose]);
+
+  useEffect(() => {
+    if (!ref2.current) return;
+    ref2.current.scrollLeft = 0;
+    ref2.current.scrollTop = 0;
+  }, [infoboxKey]);
+
+  useEffect(() => {
+    if (!visible) {
+      setOpen(true);
+    }
+    setTimeout(() => {
+      setShowMask(visible);
+    }, 0);
+  }, [visible]);
+
+  const wrapperStyles = useMemo(
+    () => css`
+      background-color: ${backgroundColor || publishedTheme?.background};
+      ${typographyStyles({ color: publishedTheme?.mainText, ...typography })}
+    `,
+    [publishedTheme, backgroundColor, typography],
+  );
+
+  return (
+    <>
+      <Mask activate={showMask && useMask} onClick={onMaskClick} />
+      <StyledFloatedPanel
+        className={className}
+        visible={visible}
+        open={open}
+        styles={wrapperStyles}
+        onClick={onClick}
+        onEnter={onEnter}
+        onEntered={onEntered}
+        onExit={onExit}
+        onExited={onExited}
+        position={position}
+        size={size}
+        height={height}
+        heightType={heightType}
+        outlineColor={outlineColor ? outlineColor : publishedTheme?.mainText}
+        outlineWidth={outlineWidth}
+        floated>
+        <Wrapper ref={ref} open={open}>
+          <TitleFlex flex="0 0 auto" direction="column" onClick={handleOpen}>
+            {!open && (
+              <IconWrapper align="center" justify="space-around">
+                <StyledIcon
+                  color={publishedTheme?.mainIcon}
+                  icon="arrowLeft"
+                  size={16}
+                  open={open}
+                />
+                <StyledIcon color={publishedTheme?.mainIcon} icon="infobox" size={24} open={open} />
+              </IconWrapper>
+            )}
+            {open && (
+              <Text size="m" weight="bold" customColor>
+                <TitleText show={showTitle ?? true}>{title || " "}</TitleText>
+              </Text>
+            )}
+          </TitleFlex>
+          <CloseBtn
+            color={publishedTheme?.mainIcon}
+            icon="cancel"
+            size={16}
+            onClick={handleClose}
+            open={open}
+          />
+          <Content
+            ref={ref2}
+            open={open}
+            paddingTop={paddingTop}
+            paddingBottom={paddingBottom}
+            paddingLeft={paddingLeft}
+            paddingRight={paddingRight}>
+            {children}
+          </Content>
+        </Wrapper>
+      </StyledFloatedPanel>
+    </>
+  );
+};
+
+const Mask = styled.div<{ activate?: boolean }>`
+  display: ${({ activate }) => (activate ? "block" : "none")};
+  height: 100%;
+  width: 100%;
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  background-color: rgb(0, 0, 0);
+  background-color: rgba(0, 0, 0, 0.6);
+  overflow-x: hidden;
+`;
+
+const StyledFloatedPanel = styled(FloatedPanel)<{
+  floated?: boolean;
+  open?: boolean;
+  position?: "right" | "middle" | "left";
+  size?: "small" | "medium" | "large";
+  height?: number;
+  heightType?: "auto" | "manual";
+  outlineColor?: string;
+  outlineWidth?: number;
+}>`
+  top: 15%;
+  ${({ open, position }) =>
+    open
+      ? position === "middle"
+        ? `left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;`
+        : position === "left"
+        ? "left: 30px"
+        : `right: 30px`
+      : "right: -6px"};
+  ${({ heightType, height, open }) =>
+    heightType === "auto" ? "max-height: 70%" : height && open ? `height: ${height}px` : ""};
+  width: ${({ size, open }) =>
+    open ? (size === "large" ? "624px" : size === "medium" ? "540px" : "346px") : "80px"};
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+  ${({ outlineWidth, outlineColor, open }) =>
+    outlineWidth && open ? `border: ${outlineWidth}px ${outlineColor} solid` : ""};
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  z-index: ${({ theme }) => theme.zIndexes.propertyFieldPopup};
+  transition: all 0.6s;
+
+  @media (max-width: 624px) {
+    right: ${({ open }) => (open ? "16px" : "-8px")};
+    top: 20vh;
+    bottom: auto;
+    width: ${({ open }) => (open ? "calc(100% - 33px)" : "70px")};
+    ${({ open }) => !open && "height: 40px;"}
+    max-height: 60vh;
+  }
+`;
+
+const Wrapper = styled.div<{ open?: boolean }>`
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  min-height: ${({ open }) => (open ? "280px" : "100%")};
+
+  @media (max-width: 624px) {
+    transition: all 0.4s;
+    width: auto;
+  }
+`;
+
+const IconWrapper = styled(Flex)`
+  width: 52px;
+  @media (max-width: 624px) {
+    width: 42px;
+  }
+`;
+
+const TitleFlex = styled(Flex)<{ open?: boolean }>`
+  margin: ${({ open }) => (!open ? metricsSizes["s"] : metricsSizes["m"]) + "px auto"};
+  text-align: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  width: 75%;
+`;
+
+const StyledIcon = styled(Icon)<{ open?: boolean; color?: string }>`
+  display: ${({ open }) => (open ? "none" : "block")};
+  color: ${({ color }) => color};
+`;
+
+const TitleText = styled.span<{
+  show: boolean;
+}>`
+  line-height: ${metricsSizes["2xl"]}px;
+  display: ${({ show }) => (show ? "block" : "none")};
+`;
+
+const CloseBtn = styled(Icon)<{ open?: boolean; color?: string }>`
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  cursor: pointer;
+  color: ${({ color }) => color};
+  display: ${({ open }) => (open ? "block" : "none")};
+`;
+
+const Content = styled.div<{
+  open?: boolean;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+}>`
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  flex: auto;
+  font-size: ${fonts.sizes.s}px;
+  padding: 10px 0 20px 0;
+  transition: all 0.2s linear;
+
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  a {
+    color: inherit;
+  }
+
+  max-height: ${({ open }) => (open ? "50vh" : "0")};
+  padding: ${({ open }) => (open ? "20px 0" : "0")};
+  padding-top: ${({ paddingTop, open }) => (paddingTop && open ? `${paddingTop}px` : null)};
+  padding-bottom: ${({ paddingBottom, open }) =>
+    paddingBottom && open ? `${paddingBottom}px` : null};
+  padding-left: ${({ paddingLeft, open }) => (paddingLeft && open ? `${paddingLeft}px` : null)};
+  padding-right: ${({ paddingRight, open }) => (paddingRight && open ? `${paddingRight}px` : null)};
+`;
+
+export default Frame;
diff --git a/web/src/beta/core/Crust/Infobox/hooks.ts b/web/src/beta/core/Crust/Infobox/hooks.ts
new file mode 100644
index 0000000000..e748cc5109
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/hooks.ts
@@ -0,0 +1,38 @@
+import { useState, useCallback } from "react";
+
+export default (onBlockInsert?: (bi: number, i: number, p?: "top" | "bottom") => void) => {
+  const [insertionPopUpPosition, setInsertionPopUpPosition] =
+    useState<[number, "top" | "bottom" | undefined]>();
+
+  const onInsertionButtonClick = useCallback((i: number, p?: "top" | "bottom") => {
+    setInsertionPopUpPosition(p ? [i, p] : [i, undefined]);
+  }, []);
+
+  const onInsertionPopUpClose = useCallback(() => {
+    setInsertionPopUpPosition(undefined);
+  }, []);
+
+  const handleBlockInsert = useCallback(
+    (bi: number) => {
+      if (insertionPopUpPosition) {
+        onBlockInsert?.(bi, insertionPopUpPosition[0], insertionPopUpPosition[1]);
+        onInsertionPopUpClose();
+      }
+    },
+    [insertionPopUpPosition, onBlockInsert, onInsertionPopUpClose],
+  );
+
+  const [isReadyToRender, setIsReadyToRender] = useState(false);
+  const setReadyToRender = useCallback(() => setIsReadyToRender(true), [setIsReadyToRender]);
+  const setNotReadyToRender = useCallback(() => setIsReadyToRender(true), [setIsReadyToRender]);
+
+  return {
+    insertionPopUpPosition,
+    onInsertionButtonClick,
+    onInsertionPopUpClose,
+    handleBlockInsert,
+    isReadyToRender,
+    setReadyToRender,
+    setNotReadyToRender,
+  };
+};
diff --git a/web/src/beta/core/Crust/Infobox/index.stories.tsx b/web/src/beta/core/Crust/Infobox/index.stories.tsx
new file mode 100644
index 0000000000..da3077705f
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/index.stories.tsx
@@ -0,0 +1,83 @@
+import { Meta, Story } from "@storybook/react";
+
+import Component, { Props, InfoboxProperty } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+  argTypes: {
+    showTitle: { type: { name: "boolean" } },
+    title: { type: { name: "string" } },
+    heightType: { type: { name: "enum", value: ["auto", "manual"] } },
+    infoboxPaddingTop: { type: { name: "number" } },
+    infoboxPaddingBottom: { type: { name: "number" } },
+    infoboxPaddingLeft: { type: { name: "number" } },
+    infoboxPaddingRight: { type: { name: "number" } },
+    size: { type: { name: "number" } },
+    position: { type: { name: "enum", value: ["right", "middle", "left"] } },
+    bgcolor: { type: { name: "string" }, control: { type: "color" } },
+    outlineColor: { type: { name: "string" }, control: { type: "color" } },
+    outlineWidth: { type: { name: "number" } },
+    useMask: { type: { name: "boolean" } },
+  },
+} as Meta;
+
+const Template: Story<Props & InfoboxProperty> = args => (
+  <Component
+    {...args}
+    property={{
+      ...args.property,
+      ...{
+        showTitle: args.showTitle,
+        title: args.title,
+        heightType: args.heightType,
+        infoboxPaddingBottom: args.infoboxPaddingBottom,
+        infoboxPaddingTop: args.infoboxPaddingTop,
+        infoboxPaddingLeft: args.infoboxPaddingLeft,
+        infoboxPaddingRight: args.infoboxPaddingRight,
+        size: args.size,
+        position: args.position,
+        bgcolor: args.bgcolor,
+        outlineColor: args.outlineColor,
+        outlineWidth: args.outlineWidth,
+        useMask: args.useMask,
+      },
+    }}
+  />
+);
+Template.args = {
+  blocks: [
+    {
+      id: "a",
+      pluginId: "reearth",
+      extensionId: "textblock",
+      property: {
+        text: "# Hello",
+        markdown: true,
+      },
+    },
+    {
+      id: "b",
+      pluginId: "reearth",
+      extensionId: "textblock",
+      property: {
+        text: "# World!",
+        markdown: true,
+      },
+    },
+  ],
+  title: "Hoge",
+  showTitle: true,
+  visible: true,
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  ...Template.args,
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  ...Template.args,
+  size: "large",
+};
diff --git a/web/src/beta/core/Crust/Infobox/index.test.tsx b/web/src/beta/core/Crust/Infobox/index.test.tsx
new file mode 100644
index 0000000000..47f67da5f4
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/index.test.tsx
@@ -0,0 +1,16 @@
+import { test, expect } from "vitest";
+
+import { Provider } from "@reearth/beta/utils/use-dnd";
+import { render, screen } from "@reearth/test/utils";
+
+import Infobox from ".";
+
+test("infobox should render blocks by renderBlock prop", async () => {
+  render(
+    <Provider>
+      <Infobox visible blocks={[{ id: "BLOCK ID" }]} renderBlock={b => <p>{b.block?.id}</p>} />
+    </Provider>,
+  );
+
+  expect(screen.getByText("BLOCK ID")).toBeVisible();
+});
diff --git a/web/src/beta/core/Crust/Infobox/index.tsx b/web/src/beta/core/Crust/Infobox/index.tsx
new file mode 100644
index 0000000000..b854392be3
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/index.tsx
@@ -0,0 +1,180 @@
+import React, { type ReactNode } from "react";
+
+import AdditionButton from "@reearth/beta/components/AdditionButton";
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import type { Layer } from "@reearth/beta/core/mantle";
+import { useT } from "@reearth/services/i18n";
+import { styled, useTheme } from "@reearth/services/theme";
+
+import BlockComponent from "./Block";
+import Field from "./Field";
+import Frame from "./Frame";
+import useHooks from "./hooks";
+import type { ValueTypes, ValueType, Block, InfoboxProperty, Theme, BlockProps } from "./types";
+
+export type { InfoboxProperty, Block, LatLng, BlockProps } from "./types";
+
+export type Props = {
+  className?: string;
+  infoboxKey?: string;
+  property?: InfoboxProperty;
+  blocks?: Block[];
+  title?: string;
+  isEditable?: boolean;
+  isBuilt?: boolean;
+  selectedBlockId?: string;
+  visible?: boolean;
+  theme?: Theme;
+  layer?: Layer;
+  onMaskClick?: () => void;
+  onBlockSelect?: (id?: string) => void;
+  onBlockChange?: <T extends ValueType>(
+    blockId: string,
+    schemaItemId: string,
+    fieldId: string,
+    value: ValueTypes[T],
+    type: T,
+    layer?: Layer,
+  ) => void;
+  onBlockMove?: (id: string, fromIndex: number, toIndex: number) => void;
+  onBlockDelete?: (id: string) => void;
+  onBlockInsert?: (bi: number, i: number, pos?: "top" | "bottom") => void;
+  renderBlock?: (block: BlockProps) => ReactNode;
+  renderInsertionPopup?: (onSelect: (bi: number) => void, onClose: () => void) => ReactNode;
+  onClose?: () => void;
+};
+
+const Infobox: React.FC<Props> = ({
+  className,
+  infoboxKey,
+  property,
+  blocks,
+  title,
+  isEditable,
+  isBuilt,
+  selectedBlockId,
+  visible,
+  theme: infoboxTheme,
+  onMaskClick,
+  onBlockSelect,
+  onBlockChange,
+  onBlockMove,
+  onBlockInsert,
+  renderInsertionPopup,
+  onClose,
+  ...props
+}) => {
+  const {
+    insertionPopUpPosition,
+    isReadyToRender,
+    onInsertionButtonClick,
+    onInsertionPopUpClose,
+    handleBlockInsert,
+    setNotReadyToRender,
+    setReadyToRender,
+  } = useHooks(onBlockInsert);
+  const theme = useTheme();
+  const t = useT();
+
+  return (
+    <Frame
+      className={className}
+      infoboxKey={infoboxKey}
+      title={property?.title || title}
+      size={property?.size}
+      height={property?.height}
+      heightType={property?.heightType}
+      position={property?.position}
+      outlineColor={property?.outlineColor}
+      useMask={!!property?.useMask}
+      outlineWidth={property?.outlineWidth}
+      visible={visible}
+      unselectOnClose={property?.unselectOnClose}
+      noContent={!blocks?.length}
+      theme={infoboxTheme}
+      backgroundColor={property?.bgcolor}
+      typography={property?.typography}
+      paddingTop={property?.infoboxPaddingTop}
+      paddingBottom={property?.infoboxPaddingBottom}
+      paddingRight={property?.infoboxPaddingRight}
+      paddingLeft={property?.infoboxPaddingLeft}
+      showTitle={property?.showTitle}
+      onMaskClick={onMaskClick}
+      onClick={() => selectedBlockId && onBlockSelect?.(undefined)}
+      onEnter={setNotReadyToRender}
+      onEntered={setReadyToRender}
+      onExit={setNotReadyToRender}
+      onClose={onClose}>
+      {blocks?.map((b, i) => (
+        <Field
+          key={b.id}
+          id={b.id}
+          index={i}
+          isEditable={isEditable}
+          isBuilt={isBuilt}
+          isSelected={selectedBlockId === b.id}
+          dragDisabled={blocks.length < 2}
+          renderInsertionPopUp={
+            isReadyToRender &&
+            insertionPopUpPosition?.[0] === i &&
+            renderInsertionPopup?.(handleBlockInsert, onInsertionPopUpClose)
+          }
+          insertionPopUpPosition={insertionPopUpPosition?.[1]}
+          onMove={onBlockMove}
+          onInsert={p => onInsertionButtonClick?.(i, p)}>
+          <BlockComponent
+            block={b}
+            isSelected={!!isEditable && !isBuilt && selectedBlockId === b.id}
+            isEditable={isEditable}
+            isBuilt={isBuilt}
+            infoboxProperty={property}
+            theme={infoboxTheme}
+            onChange={(...args) => onBlockChange?.(b.id, ...args, props.layer)}
+            onClick={() => {
+              if (b.id && selectedBlockId !== b.id) {
+                onBlockSelect?.(b.id);
+              }
+            }}
+            {...props}
+          />
+        </Field>
+      ))}
+      {isEditable && (blocks?.length ?? 0) === 0 && (
+        <>
+          <AdditionButton onClick={() => onInsertionButtonClick?.(0)}>
+            {isReadyToRender &&
+              insertionPopUpPosition &&
+              renderInsertionPopup?.(handleBlockInsert, onInsertionPopUpClose)}
+          </AdditionButton>
+          <NoContentInfo>
+            <InnerWrapper size="xs" color={theme.infoBox.weakText}>
+              <StyledIcon icon="arrowLong" />
+              <span>{t(`Move mouse here and click "+" to add content`)}</span>
+            </InnerWrapper>
+          </NoContentInfo>
+        </>
+      )}
+    </Frame>
+  );
+};
+
+const NoContentInfo = styled.div`
+  display: flex;
+  justify-content: center;
+  color: ${props => props.theme.main.weak};
+  text-align: left;
+`;
+
+const StyledIcon = styled(Icon)`
+  margin: 0 auto 15px auto;
+  height: 66px;
+`;
+
+const InnerWrapper = styled(Text)`
+  display: flex;
+  flex-direction: column;
+  width: 184px;
+`;
+
+export default Infobox;
diff --git a/web/src/beta/core/Crust/Infobox/types.ts b/web/src/beta/core/Crust/Infobox/types.ts
new file mode 100644
index 0000000000..20ee6a5e19
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/types.ts
@@ -0,0 +1,39 @@
+import type { Layer } from "@reearth/beta/core/mantle";
+
+import type { Typography } from "../types";
+
+export type { LatLng, Typography, ValueTypes, ValueType, Theme } from "../types";
+
+export type InfoboxProperty = {
+  showTitle?: boolean;
+  title?: string;
+  height?: number;
+  heightType?: "auto" | "manual";
+  infoboxPaddingTop?: number;
+  infoboxPaddingBottom?: number;
+  infoboxPaddingLeft?: number;
+  infoboxPaddingRight?: number;
+  size?: "small" | "medium" | "large";
+  position?: "right" | "middle" | "left";
+  typography?: Typography;
+  bgcolor?: string;
+  outlineColor?: string;
+  outlineWidth?: number;
+  useMask?: boolean;
+  defaultContent?: "description" | "attributes";
+  unselectOnClose?: boolean;
+};
+
+export type Block<P = any> = {
+  id: string;
+  pluginId?: string;
+  extensionId?: string;
+  property?: P;
+  propertyId?: string;
+};
+
+export type BlockProps<P = any> = {
+  block?: Block<P>;
+  layer?: Layer;
+  onClick?: () => void;
+};
diff --git a/web/src/beta/core/Crust/Infobox/utils.ts b/web/src/beta/core/Crust/Infobox/utils.ts
new file mode 100644
index 0000000000..7742c79640
--- /dev/null
+++ b/web/src/beta/core/Crust/Infobox/utils.ts
@@ -0,0 +1 @@
+export { typographyStyles, type Typography } from "../utils";
diff --git a/web/src/beta/core/Crust/Plugins/Plugin/ModalContainer/index.tsx b/web/src/beta/core/Crust/Plugins/Plugin/ModalContainer/index.tsx
new file mode 100644
index 0000000000..524284662b
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/Plugin/ModalContainer/index.tsx
@@ -0,0 +1,72 @@
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useRef,
+  useImperativeHandle,
+  useCallback,
+} from "react";
+
+import theme, { styled } from "@reearth/services/theme";
+
+export type PluginModalInfo = {
+  id?: string;
+  background?: string;
+};
+
+type Props = {
+  onPluginModalShow: (modalInfo?: PluginModalInfo) => void;
+  shownPluginModalInfo?: PluginModalInfo;
+};
+
+const ModalContainer: ForwardRefRenderFunction<HTMLDivElement | undefined, Props> = (
+  { onPluginModalShow, shownPluginModalInfo },
+  ref,
+) => {
+  const innerRef = useRef<HTMLDivElement>(null);
+
+  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);
+
+  const handleModalClose = useCallback(() => {
+    onPluginModalShow?.();
+  }, [onPluginModalShow]);
+
+  return (
+    <>
+      <Background
+        visible={
+          !!shownPluginModalInfo?.id &&
+          !!shownPluginModalInfo?.background &&
+          shownPluginModalInfo?.background !== "none"
+        }
+        background={shownPluginModalInfo?.background}
+        onClick={handleModalClose}
+      />
+      <Wrapper visible={!!shownPluginModalInfo?.id} ref={innerRef} />
+    </>
+  );
+};
+
+const Wrapper = styled.div<{ visible: boolean }>`
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  visibility: ${({ visible }) => (visible ? "visible" : "hidden")};
+  z-index: ${({ visible }) => (visible ? theme.zIndexes.pluginModal : theme.zIndexes.hidden)};
+  transition: opacity 0.25s;
+  opacity: ${({ visible }) => (visible ? "1" : "0")};
+`;
+
+const Background = styled.div<{ visible: boolean; background?: string }>`
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: ${({ background }) => background};
+  visibility: ${({ visible }) => (visible ? "visible" : "hidden")};
+  z-index: ${({ visible }) => (visible ? theme.zIndexes.pluginModal - 1 : theme.zIndexes.hidden)};
+`;
+
+export default forwardRef(ModalContainer);
diff --git a/web/src/beta/core/Crust/Plugins/Plugin/PopupContainer/index.tsx b/web/src/beta/core/Crust/Plugins/Plugin/PopupContainer/index.tsx
new file mode 100644
index 0000000000..a55ca3e47a
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/Plugin/PopupContainer/index.tsx
@@ -0,0 +1,67 @@
+import { computePosition, offset, autoUpdate } from "@floating-ui/dom";
+import {
+  forwardRef,
+  ForwardRefRenderFunction,
+  useRef,
+  useImperativeHandle,
+  useEffect,
+  RefObject,
+} from "react";
+
+import theme, { styled } from "@reearth/services/theme";
+
+import type { PopupPosition } from "../../plugin_types";
+
+type AxesOffsets = {
+  mainAxis?: number;
+  crossAxis?: number;
+  alignmentAxis?: number | null;
+};
+
+export type PluginPopupInfo = {
+  id?: string;
+  position?: PopupPosition;
+  offset?: number | AxesOffsets;
+  ref?: RefObject<HTMLIFrameElement>;
+};
+
+type Props = {
+  shownPluginPopupInfo?: PluginPopupInfo;
+};
+
+const PopupContainer: ForwardRefRenderFunction<HTMLDivElement | undefined, Props> = (
+  { shownPluginPopupInfo },
+  ref,
+) => {
+  const innerRef = useRef<HTMLDivElement>(null);
+
+  useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);
+
+  useEffect(() => {
+    if (!shownPluginPopupInfo?.ref?.current || !innerRef.current) return;
+    return autoUpdate(shownPluginPopupInfo?.ref?.current, innerRef.current, () => {
+      if (!shownPluginPopupInfo?.ref?.current || !innerRef.current) return;
+      computePosition(shownPluginPopupInfo?.ref?.current, innerRef.current, {
+        placement: shownPluginPopupInfo.position ?? "bottom-start",
+        middleware: [offset(shownPluginPopupInfo.offset ?? 0)],
+      }).then(({ x, y }) => {
+        if (innerRef.current) {
+          innerRef.current.style.left = `${x}px`;
+          innerRef.current.style.top = `${y}px`;
+        }
+      });
+    });
+  }, [shownPluginPopupInfo]);
+
+  return <Wrapper visible={!!shownPluginPopupInfo?.id} ref={innerRef} />;
+};
+
+const Wrapper = styled.div<{ visible: boolean }>`
+  position: absolute;
+  visibility: ${({ visible }) => (visible ? "visible" : "hidden")};
+  z-index: ${({ visible }) => (visible ? theme.zIndexes.pluginPopup : theme.zIndexes.hidden)};
+  transition: opacity 0.25s;
+  opacity: ${({ visible }) => (visible ? "1" : "0")};
+`;
+
+export default forwardRef(PopupContainer);
diff --git a/web/src/beta/core/Crust/Plugins/Plugin/hooks.ts b/web/src/beta/core/Crust/Plugins/Plugin/hooks.ts
new file mode 100644
index 0000000000..b397ffcfce
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/Plugin/hooks.ts
@@ -0,0 +1,472 @@
+import type { Options } from "quickjs-emscripten-sync";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { RefObject } from "react";
+
+import {
+  events,
+  type Layer,
+  mergeEvents,
+  type EventEmitter,
+  type Events,
+  useGet,
+} from "@reearth/beta/core/Map";
+
+import type { Block } from "../../Infobox";
+import type { MapRef } from "../../types";
+import type { Widget, WidgetLocationOptions } from "../../Widgets";
+import { exposed } from "../api";
+import { usePluginContext } from "../context";
+import type { GlobalThis, ReearthEventType } from "../plugin_types";
+import { defaultIsMarshalable } from "../PluginFrame";
+import type { API as IFrameAPI } from "../PluginFrame";
+
+import type { PluginModalInfo } from "./ModalContainer";
+import type { PluginPopupInfo } from "./PopupContainer";
+
+export default function ({
+  mapRef,
+  onWidgetMove,
+  pluginId,
+  extensionId,
+  pluginBaseUrl,
+  extensionType,
+  visible,
+  block,
+  layer,
+  widget,
+  pluginProperty,
+  shownPluginModalInfo,
+  onVisibilityChange,
+  onPluginModalShow,
+  shownPluginPopupInfo,
+  onPluginPopupShow,
+  onRender,
+  onResize,
+}: {
+  mapRef?: RefObject<MapRef>;
+  onWidgetMove?: (widgetId: string, options: WidgetLocationOptions) => void;
+  pluginId?: string;
+  extensionId?: string;
+  pluginBaseUrl?: string;
+  extensionType?: string;
+  visible?: boolean;
+  layer?: Layer;
+  widget?: Widget;
+  block?: Block;
+  pluginProperty?: any;
+  shownPluginModalInfo?: PluginModalInfo;
+  onVisibilityChange?: (widgetId: string, v: boolean) => void;
+  onPluginModalShow?: (modalInfo?: PluginModalInfo) => void;
+  shownPluginPopupInfo?: PluginPopupInfo;
+  onPluginPopupShow?: (modalInfo?: PluginModalInfo) => void;
+  onRender?: (
+    options:
+      | {
+          width?: string | number;
+          height?: string | number;
+          extended?: boolean;
+        }
+      | undefined,
+  ) => void;
+  onResize?: (
+    width: string | number | undefined,
+    height: string | number | undefined,
+    extended: boolean | undefined,
+  ) => void;
+}) {
+  const externalRef = useRef<HTMLIFrameElement>(null);
+
+  const [uiVisible, setUIVisibility] = useState<boolean>(!!visible);
+  const [modalVisible, setModalVisibility] = useState<boolean>(false);
+  const [popupVisible, setPopupVisibility] = useState<boolean>(false);
+
+  const handleSetVisibility = useCallback(
+    (v: boolean) => {
+      setUIVisibility(v);
+      const instanceId = widget?.id ?? block?.id;
+      if (instanceId) {
+        onVisibilityChange?.(instanceId, v);
+      }
+    },
+    [onVisibilityChange, widget?.id, block?.id],
+  );
+
+  const { staticExposed, isMarshalable, onPreInit, onDispose, onModalClose, onPopupClose } =
+    useAPI({
+      extensionId,
+      extensionType,
+      pluginId,
+      block,
+      layer,
+      widget,
+      pluginProperty,
+      modalVisible,
+      popupVisible,
+      externalRef,
+      onPluginModalShow,
+      onPluginPopupShow,
+      setUIVisibility: handleSetVisibility,
+      onRender,
+      onResize,
+      mapRef,
+      onWidgetMove,
+    }) ?? [];
+
+  useEffect(() => {
+    const visible = shownPluginModalInfo?.id === (widget?.id ?? block?.id);
+    if (modalVisible !== visible) {
+      setModalVisibility(visible);
+      if (!visible) {
+        onModalClose();
+      }
+    }
+  }, [
+    modalVisible,
+    shownPluginModalInfo,
+    pluginId,
+    extensionId,
+    widget?.id,
+    block?.id,
+    onModalClose,
+  ]);
+
+  useEffect(() => {
+    const visible = shownPluginPopupInfo?.id === (widget?.id ?? block?.id);
+    if (popupVisible !== visible) {
+      setPopupVisibility(visible);
+      if (!visible) {
+        onPopupClose();
+      }
+    }
+  }, [
+    popupVisible,
+    shownPluginPopupInfo,
+    pluginId,
+    extensionId,
+    widget?.id,
+    block?.id,
+    onPopupClose,
+  ]);
+
+  const onError = useCallback(
+    (err: any) => {
+      console.error(`plugin error from ${pluginId}/${extensionId}: `, err);
+    },
+    [pluginId, extensionId],
+  );
+
+  const src =
+    pluginId && extensionId
+      ? `${pluginBaseUrl}/${`${pluginId}/${extensionId}`.replace(/\.\./g, "")}.js`
+      : undefined;
+
+  return {
+    skip: !staticExposed,
+    src,
+    isMarshalable,
+    uiVisible,
+    modalVisible,
+    popupVisible,
+    externalRef,
+    exposed: staticExposed,
+    onError,
+    onPreInit,
+    onDispose,
+  };
+}
+
+export function useAPI({
+  pluginId = "",
+  extensionId = "",
+  extensionType = "",
+  mapRef,
+  pluginProperty,
+  layer,
+  block,
+  widget,
+  modalVisible,
+  popupVisible,
+  externalRef,
+  onWidgetMove,
+  onPluginModalShow,
+  onPluginPopupShow,
+  setUIVisibility,
+  onRender,
+  onResize,
+}: {
+  pluginId: string | undefined;
+  extensionId: string | undefined;
+  extensionType: string | undefined;
+  mapRef?: RefObject<MapRef>;
+  pluginProperty: any;
+  layer: Layer | undefined;
+  block: Block | undefined;
+  widget: Widget | undefined;
+  modalVisible?: boolean;
+  popupVisible?: boolean;
+  externalRef: RefObject<HTMLIFrameElement> | undefined;
+  onPluginModalShow?: (modalInfo?: PluginModalInfo) => void;
+  onPluginPopupShow?: (popupInfo?: PluginPopupInfo) => void;
+  setUIVisibility: (visible: boolean) => void;
+  onWidgetMove?: (widgetId: string, options: WidgetLocationOptions) => void;
+  onRender?: (
+    options:
+      | {
+          width?: string | number;
+          height?: string | number;
+          extended?: boolean;
+        }
+      | undefined,
+  ) => void;
+  onResize?: (
+    width: string | number | undefined,
+    height: string | number | undefined,
+    extended: boolean | undefined,
+  ) => void;
+}): {
+  staticExposed: ((api: IFrameAPI) => GlobalThis) | undefined;
+  isMarshalable: Options["isMarshalable"] | undefined;
+  onPreInit: () => void;
+  onDispose: () => void;
+  onModalClose: () => void;
+  onPopupClose: () => void;
+} {
+  const ctx = usePluginContext();
+  const getLayer = useGet(layer);
+  const getBlock = useGet(block);
+  const getWidget = useGet(widget);
+
+  const event =
+    useRef<[Events<ReearthEventType>, EventEmitter<ReearthEventType>, (() => void) | undefined]>();
+
+  const pluginMessageSender = useCallback((msg: any) => {
+    event.current?.[1]("pluginmessage", msg);
+  }, []);
+
+  const onPreInit = useCallback(() => {
+    const e = events<ReearthEventType>();
+    let cancel: (() => void) | undefined;
+
+    if (ctx?.reearth.on && ctx.reearth.off && ctx.reearth.once) {
+      const source: Events<ReearthEventType> = {
+        on: ctx.reearth.on,
+        off: ctx.reearth.off,
+        once: ctx.reearth.once,
+      };
+      cancel = mergeEvents<ReearthEventType>(source, e[1], [
+        "cameramove",
+        "select",
+        "click",
+        "doubleclick",
+        "mousedown",
+        "mouseup",
+        "rightclick",
+        "rightdown",
+        "rightup",
+        "middleclick",
+        "middledown",
+        "middleup",
+        "mousemove",
+        "mouseenter",
+        "mouseleave",
+        "wheel",
+        "tick",
+        "resize",
+        "layeredit",
+      ]);
+    }
+
+    event.current = [e[0], e[1], cancel];
+
+    const instanceId = widget?.id ?? block?.id;
+    if (instanceId) {
+      ctx?.pluginInstances.addPluginMessageSender(instanceId, pluginMessageSender);
+      ctx.pluginInstances.runTimesCache.increment(instanceId);
+    }
+  }, [
+    ctx?.reearth.on,
+    ctx?.reearth.off,
+    ctx?.reearth.once,
+    ctx?.pluginInstances,
+    widget?.id,
+    block?.id,
+    pluginMessageSender,
+  ]);
+
+  const onDispose = useCallback(() => {
+    event.current?.[1]("close");
+    event.current?.[2]?.();
+    event.current = undefined;
+    if (modalVisible) {
+      onPluginModalShow?.();
+    }
+    if (popupVisible) {
+      onPluginPopupShow?.();
+    }
+    const instanceId = widget?.id ?? block?.id;
+    if (instanceId) {
+      ctx?.pluginInstances.removePluginMessageSender(instanceId);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [onPluginModalShow, onPluginPopupShow]);
+
+  const isMarshalable = useCallback(
+    (target: any) => defaultIsMarshalable(target) || !!mapRef?.current?.layers?.isLayer(target),
+    [mapRef],
+  );
+
+  const staticExposed = useMemo((): ((api: IFrameAPI) => GlobalThis) | undefined => {
+    return ({ main, modal, popup, messages, startEventLoop }: IFrameAPI) => {
+      return exposed({
+        commonReearth: ctx.reearth,
+        events: {
+          on: (type, e) => {
+            if (type === "message") {
+              messages.on(e as (msg: any) => void);
+              return;
+            }
+            event.current?.[0]?.on(type, e);
+          },
+          off: (type, e) => {
+            if (type === "message") {
+              messages.off(e as (msg: any) => void);
+              return;
+            }
+            event.current?.[0]?.on(type, e);
+          },
+          once: (type, e) => {
+            if (type === "message") {
+              messages.once(e as (msg: any) => void);
+              return;
+            }
+            event.current?.[0]?.on(type, e);
+          },
+        },
+        plugin: {
+          id: pluginId,
+          extensionType,
+          extensionId,
+          property: pluginProperty,
+        },
+        block: getBlock,
+        layer: getLayer,
+        widget: getWidget,
+        postMessage: main.postMessage,
+        render: (html, { extended, ...options } = {}) => {
+          main.render(html, options);
+          onRender?.(
+            typeof extended !== "undefined" || options ? { extended, ...options } : undefined,
+          );
+          setUIVisibility(true);
+        },
+        closeUI: () => {
+          setUIVisibility(false);
+        },
+        renderModal: (html, { ...options } = {}) => {
+          modal.render(html, options);
+          onPluginModalShow?.({
+            id: widget?.id ?? block?.id,
+            background: options?.background,
+          });
+        },
+        closeModal: () => {
+          onPluginModalShow?.();
+        },
+        updateModal: options => {
+          modal.resize(options.width, options.height);
+          onPluginModalShow?.({
+            id: widget?.id ?? block?.id,
+            background: options.background,
+          });
+        },
+        postMessageModal: modal.postMessage,
+        renderPopup: (html, { ...options } = {}) => {
+          let rendered = false;
+          popup.render(html, {
+            ...options,
+            onAutoResized: () => {
+              if (!rendered) {
+                onPluginPopupShow?.({
+                  id: widget?.id ?? block?.id,
+                  ref: externalRef,
+                  ...options,
+                });
+                rendered = true;
+              }
+            },
+          });
+          onPluginPopupShow?.({
+            id: widget?.id ?? block?.id,
+            ref: externalRef,
+            ...options,
+          });
+        },
+        closePopup: () => {
+          onPluginPopupShow?.();
+        },
+        updatePopup: options => {
+          if (options.width !== undefined || options.height !== undefined) {
+            popup.resize(options.width, options.height);
+          }
+          onPluginPopupShow?.({
+            id: widget?.id ?? block?.id,
+            ...options,
+            ref: externalRef,
+          });
+        },
+        postMessagePopup: popup.postMessage,
+        resize: (width, height, extended) => {
+          main.resize(width, height);
+          onResize?.(width, height, extended);
+        },
+        startEventLoop,
+        overrideSceneProperty: ctx.overrideSceneProperty,
+        moveWidget: onWidgetMove,
+        pluginPostMessage: ctx.pluginInstances.postMessage,
+        clientStorage: ctx.clientStorage,
+      });
+    };
+  }, [
+    ctx?.reearth,
+    ctx?.pluginInstances,
+    ctx?.clientStorage,
+    ctx?.overrideSceneProperty,
+    extensionId,
+    extensionType,
+    pluginId,
+    pluginProperty,
+    widget?.id,
+    block?.id,
+    externalRef,
+    getBlock,
+    getLayer,
+    getWidget,
+    onPluginModalShow,
+    onPluginPopupShow,
+    setUIVisibility,
+    onRender,
+    onResize,
+    onWidgetMove,
+  ]);
+
+  useEffect(() => {
+    event.current?.[1]("update");
+  }, [block, layer, widget, ctx?.reearth.scene.property]);
+
+  const onModalClose = useCallback(() => {
+    event.current?.[1]("modalclose");
+  }, []);
+
+  const onPopupClose = useCallback(() => {
+    event.current?.[1]("popupclose");
+  }, []);
+
+  return {
+    staticExposed,
+    isMarshalable,
+    onPreInit,
+    onDispose,
+    onModalClose,
+    onPopupClose,
+  };
+}
diff --git a/web/src/beta/core/Crust/Plugins/Plugin/index.stories.tsx b/web/src/beta/core/Crust/Plugins/Plugin/index.stories.tsx
new file mode 100644
index 0000000000..8abecaeecc
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/Plugin/index.stories.tsx
@@ -0,0 +1,36 @@
+import { Meta, Story } from "@storybook/react";
+
+import { Provider } from "../storybook";
+
+import Component, { Props } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => (
+  <Provider>
+    <div style={{ background: "#fff" }}>
+      <Component {...args} />
+    </div>
+  </Provider>
+);
+
+Default.args = {
+  pluginId: "plugins",
+  extensionId: "plugin",
+  pluginBaseUrl: "",
+  visible: true,
+};
+
+export const Headless: Story<Props> = args => (
+  <Provider>
+    <Component {...args} />
+  </Provider>
+);
+
+Headless.args = {
+  sourceCode: `console.log("hello world");`,
+  visible: true,
+};
diff --git a/web/src/beta/core/Crust/Plugins/Plugin/index.tsx b/web/src/beta/core/Crust/Plugins/Plugin/index.tsx
new file mode 100644
index 0000000000..07e1bf3f81
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/Plugin/index.tsx
@@ -0,0 +1,144 @@
+import type { RefObject } from "react";
+
+import type { Layer } from "@reearth/beta/core/mantle";
+
+import type { Block } from "../../Infobox";
+import type { MapRef } from "../../types";
+import type { Widget, WidgetLocationOptions } from "../../Widgets";
+import P, { type Props as PluginProps } from "../PluginFrame";
+
+import useHooks from "./hooks";
+import type { PluginModalInfo } from "./ModalContainer";
+import type { PluginPopupInfo } from "./PopupContainer";
+
+export { default as PopupContainer, type PluginPopupInfo } from "./PopupContainer";
+export { default as ModalContainer, type PluginModalInfo } from "./ModalContainer";
+
+export type CommonProps = {
+  pluginProperty?: any; // Taken from Visualizer
+  pluginBaseUrl?: string; // Taken from Visualizer
+  pluginModalContainer?: HTMLElement | DocumentFragment;
+  shownPluginModalInfo?: PluginModalInfo;
+  pluginPopupContainer?: HTMLElement | DocumentFragment;
+  shownPluginPopupInfo?: PluginPopupInfo;
+  onPluginModalShow?: (modalInfo?: PluginModalInfo) => void;
+  onPluginPopupShow?: (popupInfo?: PluginPopupInfo) => void;
+};
+
+export type ExternalPluginProps = Pick<CommonProps, "pluginProperty" | "pluginBaseUrl">;
+
+export type Props = {
+  mapRef?: RefObject<MapRef>;
+  className?: string;
+  sourceCode?: string;
+  pluginId?: string;
+  extensionId?: string;
+  extensionType?: string;
+  autoResize?: "both" | "width-only" | "height-only";
+  visible?: boolean;
+  property?: any;
+  layer?: Layer;
+  widget?: Widget;
+  block?: Block;
+  iFrameProps?: PluginProps["iFrameProps"];
+  onVisibilityChange?: (widgetId: string, v: boolean) => void;
+  onClick?: () => void;
+  onRender?: (
+    options:
+      | {
+          width?: string | number;
+          height?: string | number;
+          extended?: boolean;
+        }
+      | undefined,
+  ) => void;
+  onResize?: (
+    width: string | number | undefined,
+    height: string | number | undefined,
+    extended: boolean | undefined,
+  ) => void;
+  onWidgetMove?: (widgetId: string, options: WidgetLocationOptions) => void;
+} & CommonProps;
+
+export default function Plugin({
+  mapRef,
+  onWidgetMove,
+  className,
+  sourceCode,
+  pluginId,
+  extensionId,
+  extensionType,
+  autoResize,
+  visible,
+  pluginModalContainer,
+  shownPluginModalInfo,
+  pluginPopupContainer,
+  shownPluginPopupInfo,
+  pluginBaseUrl = "/plugins",
+  layer,
+  widget,
+  block,
+  pluginProperty,
+  iFrameProps,
+  onVisibilityChange,
+  onPluginModalShow,
+  onPluginPopupShow,
+  onClick,
+  onRender,
+  onResize,
+}: Props): JSX.Element | null {
+  const {
+    skip,
+    src,
+    isMarshalable,
+    uiVisible,
+    modalVisible,
+    popupVisible,
+    externalRef,
+    onPreInit,
+    onDispose,
+    exposed,
+    onError,
+  } = useHooks({
+    mapRef,
+    onWidgetMove,
+    pluginId,
+    extensionId,
+    extensionType,
+    pluginBaseUrl,
+    visible,
+    layer,
+    widget,
+    block,
+    pluginProperty,
+    shownPluginModalInfo,
+    shownPluginPopupInfo,
+    onVisibilityChange,
+    onPluginModalShow,
+    onPluginPopupShow,
+    onRender,
+    onResize,
+  });
+
+  return !skip && (src || sourceCode) ? (
+    <P
+      className={className}
+      src={src}
+      sourceCode={sourceCode}
+      autoResize={autoResize}
+      iFrameProps={iFrameProps}
+      uiVisible={uiVisible}
+      modalVisible={modalVisible}
+      popupVisible={popupVisible}
+      modalContainer={pluginModalContainer}
+      popupContainer={pluginPopupContainer}
+      externalRef={externalRef}
+      isMarshalable={isMarshalable}
+      exposed={exposed}
+      onError={onError}
+      onPreInit={onPreInit}
+      onDispose={onDispose}
+      onClick={onClick}
+    />
+  ) : null;
+}
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/hooks.ts b/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/hooks.ts
new file mode 100644
index 0000000000..2be70955a6
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/hooks.ts
@@ -0,0 +1,249 @@
+import {
+  IframeHTMLAttributes,
+  Ref,
+  RefObject,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+export type RefType = {
+  postMessage: (message: any) => void;
+  resize: (width: string | number | undefined, height: string | number | undefined) => void;
+};
+
+export type AutoResize = "both" | "width-only" | "height-only";
+
+export default function useHook({
+  autoResizeMessageKey = "___iframe_auto_resize___",
+  width,
+  height,
+  html,
+  ref,
+  autoResize,
+  visible,
+  iFrameProps,
+  onLoad,
+  onMessage,
+  onClick,
+  onAutoResized,
+}: {
+  width?: number | string;
+  height?: number | string;
+  autoResizeMessageKey?: string;
+  html?: string;
+  ref?: Ref<RefType>;
+  autoResize?: AutoResize;
+  visible?: boolean;
+  iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
+  onLoad?: () => void;
+  onMessage?: (message: any) => void;
+  onClick?: () => void;
+  onAutoResized?: () => void;
+} = {}): {
+  ref: RefObject<HTMLIFrameElement>;
+  props: IframeHTMLAttributes<HTMLIFrameElement>;
+  onLoad?: () => void;
+} {
+  const loaded = useRef(false);
+  const iFrameRef = useRef<HTMLIFrameElement>(null);
+  const [iFrameSize, setIFrameSize] = useState<[string | undefined, string | undefined]>();
+  const pendingMesages = useRef<any[]>([]);
+
+  useImperativeHandle(
+    ref,
+    (): RefType => ({
+      postMessage: message => {
+        if (!loaded.current || !iFrameRef.current?.contentWindow) {
+          pendingMesages.current.push(message);
+          return;
+        }
+        iFrameRef.current.contentWindow.postMessage(message, "*");
+      },
+      resize: (width, height) => {
+        const width2 = typeof width === "number" ? width + "px" : width ?? undefined;
+        const height2 = typeof height === "number" ? height + "px" : height ?? undefined;
+        setIFrameSize(width2 || height2 ? [width2, height2] : undefined);
+      },
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    const cb = (ev: MessageEvent<any>) => {
+      if (!iFrameRef.current || ev.source !== iFrameRef.current.contentWindow) return;
+      if (ev.data?.[autoResizeMessageKey]) {
+        const { width, height } = ev.data[autoResizeMessageKey];
+        if (typeof width !== "number" || typeof height !== "number") return;
+        setIFrameSize([width + "px", height + "px"]);
+        onAutoResized?.();
+      } else {
+        onMessage?.(ev.data);
+      }
+    };
+    window.addEventListener("message", cb);
+    return () => {
+      window.removeEventListener("message", cb);
+    };
+  }, [autoResize, autoResizeMessageKey, onMessage, onAutoResized]);
+
+  const onIframeLoad = useCallback(() => {
+    const win = iFrameRef.current?.contentWindow;
+    const doc = iFrameRef.current?.contentDocument;
+    if (!win || !doc?.body || !html) return;
+
+    // inject auto-resizing code
+    if (!doc.head.querySelector("script[id=_reearth_resize]")) {
+      const resize = document.createElement("script");
+      resize.id = "_reearth_resize";
+      // To include margin, getComputedStyle should be used.
+      resize.textContent = `
+        if ("ResizeObserver" in window) {
+          new window.ResizeObserver(entries => {
+            const win = document.defaultView;
+            const html = document.body.parentElement;
+            const st = win.getComputedStyle(html, "");
+            horizontalMargin = parseInt(st.getPropertyValue("margin-left"), 10) + parseInt(st.getPropertyValue("margin-right"), 10);
+            verticalMargin = parseInt(st.getPropertyValue("margin-top"), 10) + parseInt(st.getPropertyValue("margin-bottom"), 10);
+            const scrollbarW = win.innerWidth - html.offsetWidth;
+            const width = ${
+              width
+                ? typeof width === "number"
+                  ? `"${width}px"`
+                  : `"${width}"`
+                : "html.offsetWidth + horizontalMargin"
+            };
+            const height = ${
+              height
+                ? typeof height === "number"
+                  ? `"${height}px"`
+                  : `"${height}"`
+                : "html.offsetHeight + verticalMargin"
+            };
+            parent.postMessage({
+              [${JSON.stringify(autoResizeMessageKey)}]: { width, height }
+            })
+          }).observe(document.body.parentElement);
+        }
+      `;
+      doc.head.appendChild(resize);
+    }
+
+    doc.body.innerHTML = html;
+
+    linksToHead(doc, doc.body.querySelectorAll("link"));
+
+    const onScriptsLoaded = () => {
+      // post pending messages
+      if (pendingMesages.current.length) {
+        for (const msg of pendingMesages.current) {
+          win.postMessage(msg, "*");
+        }
+        pendingMesages.current = [];
+      }
+      loaded.current = true;
+      onLoad?.();
+    };
+
+    // exec scripts
+    const scripts = doc.body.querySelectorAll("script");
+    if (scripts) {
+      execScripts(scripts, false)
+        .finally(() => execScripts(scripts, true))
+        .finally(onScriptsLoaded);
+    } else {
+      onScriptsLoaded();
+    }
+  }, [autoResizeMessageKey, html, onLoad, height, width]);
+
+  const props = useMemo<IframeHTMLAttributes<HTMLIFrameElement>>(
+    () => ({
+      ...iFrameProps,
+      style: {
+        display: visible ? "block" : "none",
+        width: visible
+          ? !autoResize || autoResize == "height-only"
+            ? "100%"
+            : iFrameSize?.[0]
+          : "0px",
+        height: visible
+          ? !autoResize || autoResize == "width-only"
+            ? "100%"
+            : iFrameSize?.[1]
+          : "0px",
+        ...iFrameProps?.style,
+      },
+    }),
+    [autoResize, iFrameProps, iFrameSize, visible],
+  );
+
+  useEffect(() => {
+    const handleBlur = () => {
+      if (iFrameRef.current && iFrameRef.current === document.activeElement) {
+        onClick?.();
+      }
+    };
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("blur", handleBlur);
+    };
+  }, [onClick]);
+
+  useEffect(() => {
+    const w = typeof width === "number" ? width + "px" : width;
+    const h = typeof height === "number" ? height + "px" : height;
+    setIFrameSize(w || h ? [w, h] : undefined);
+  }, [width, height]);
+
+  return {
+    ref: iFrameRef,
+    props,
+    onLoad: onIframeLoad,
+  };
+}
+
+function execScripts(scripts: Iterable<HTMLScriptElement>, asyncScript: boolean) {
+  const isAsync = (script: HTMLScriptElement) =>
+    script.getAttribute("type") === "module" ||
+    script.getAttribute("async") ||
+    script.getAttribute("defer");
+
+  return Array.from(scripts)
+    .filter(script => (asyncScript ? isAsync(script) : !isAsync(script)))
+    .reduce((chain, oldScript) => {
+      return chain.then(() => runScript(oldScript));
+    }, Promise.resolve());
+}
+
+function runScript(oldScript: HTMLScriptElement) {
+  return new Promise<void>((resolve, rejected) => {
+    const newScript = document.createElement("script");
+    for (const attr of Array.from(oldScript.attributes)) {
+      newScript.setAttribute(attr.name, attr.value);
+    }
+    newScript.appendChild(document.createTextNode(oldScript.innerText));
+    newScript.onload = () => resolve();
+    newScript.onerror = () => rejected();
+    oldScript.parentNode?.replaceChild(newScript, oldScript);
+    if (!newScript.getAttribute("src")) {
+      resolve();
+    }
+  });
+}
+
+function linksToHead(doc: Document, links: NodeListOf<HTMLLinkElement>) {
+  for (const link of links) {
+    const newLink = document.createElement("link");
+    for (const attr of link.attributes) {
+      newLink.setAttribute(attr.name, attr.value);
+    }
+    if (link.innerText) {
+      newLink.appendChild(document.createTextNode(link.innerText));
+    }
+    doc.head.appendChild(newLink);
+    doc.body.removeChild(link);
+  }
+}
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx b/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx
new file mode 100644
index 0000000000..443214c9a8
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/index.stories.tsx
@@ -0,0 +1,48 @@
+import { Meta, Story } from "@storybook/react";
+import { useRef } from "react";
+
+import Component, { Props, Ref } from ".";
+
+export default {
+  component: Component,
+  argTypes: {
+    onLoad: { action: "onLoad" },
+    onMessage: { action: "onMessage" },
+  },
+  // parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => {
+  const ref = useRef<Ref>(null);
+  const postMessage = () => {
+    ref.current?.postMessage({ foo: new Date().toISOString() });
+  };
+  return (
+    <div style={{ background: "#fff" }}>
+      <Component {...args} ref={ref} />
+      <p>
+        <button onClick={postMessage}>postMessage</button>
+      </p>
+    </div>
+  );
+};
+
+Default.args = {
+  visible: true,
+  iFrameProps: {
+    style: {
+      width: "400px",
+      height: "300px",
+    },
+  },
+  html: `<h1>iframe</h1><script>
+  window.addEventListener("message", ev => {
+    if (ev.source !== parent) return;
+    const p = document.createElement("p");
+    p.textContent = JSON.stringify(ev.data);
+    document.body.appendChild(p);
+    parent.postMessage(ev.data, "*");
+  });
+  parent.postMessage("loaded", "*");
+</script>`,
+};
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/index.test.tsx b/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/index.test.tsx
new file mode 100644
index 0000000000..cc523e5774
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/index.test.tsx
@@ -0,0 +1,69 @@
+import { render, screen } from "@testing-library/react";
+import { expect, test } from "vitest";
+
+import Component from ".";
+
+test("works", async () => {
+  // Empty html prop
+  const { rerender } = render(<Component />);
+  expect(screen.queryByTestId("iframe")).not.toBeInTheDocument();
+
+  // Set html prop
+  const [promise, resolve] = deferred();
+  rerender(<Component html="<h1>Hoge</h1>" onLoad={resolve} />);
+  expect(screen.getByTestId("iframe")).toBeInTheDocument();
+  expect((screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body.innerHTML).toBe(
+    "",
+  );
+  await promise;
+  expect((screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body.innerHTML).toBe(
+    "<h1>Hoge</h1>",
+  );
+
+  // Update html prop
+  const [promise2, resolve2] = deferred();
+  rerender(<Component html="<h1>Foo</h1>" onLoad={resolve2} />);
+  expect(screen.getByTestId("iframe")).toBeInTheDocument();
+  expect((screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body.innerHTML).toBe(
+    "",
+  );
+  await promise2;
+  expect((screen.getByTestId("iframe") as HTMLIFrameElement).contentDocument?.body.innerHTML).toBe(
+    "<h1>Foo</h1>",
+  );
+});
+
+// This unit test will be failed because JSDOM does not support script evaluation in iframes.
+// Check out this component via Storybook instead.
+//
+// test("host -> iframe -> host", async () => {
+//   const ref = createRef<Ref>();
+//   const html = `<script>window.addEventListener("message", e => parent.postMessage(e.data, "*"));</script>`;
+//   const [promise, resolve] = deferred();
+//   const [promise2, resolve2] = deferred();
+//   const onMessage = vi.fn<[any], void>(() => resolve2());
+//   render(<Component ref={ref} html={html} onLoad={resolve} onMessage={onMessage} />);
+
+//   await promise;
+
+//   expect(onMessage).toBeCalledTimes(0);
+//   ref.current.postMessage({ foo: "bar" });
+
+//   await promise2;
+
+//   expect(onMessage).toBeCalledTimes(1);
+//   expect(onMessage).toBeCalledWith({ foo: "bar" });
+// });
+
+const deferred = (): [Promise<void>, () => void, () => void] => {
+  let resolve: () => void = () => {};
+  let reject: () => void = () => {};
+  return [
+    new Promise<void>((r, rj) => {
+      resolve = r;
+      reject = rj;
+    }),
+    resolve,
+    reject,
+  ];
+};
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/index.tsx b/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/index.tsx
new file mode 100644
index 0000000000..98d764f186
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/IFrame/index.tsx
@@ -0,0 +1,76 @@
+import composeRefs from "@seznam/compose-react-refs";
+import React, { IframeHTMLAttributes } from "react";
+import type { RefObject } from "react";
+
+import useHook, { RefType, AutoResize as AutoResizeType } from "./hooks";
+
+export type Ref = RefType;
+
+export type AutoResize = AutoResizeType;
+
+export type Props = {
+  autoResize?: AutoResize;
+  className?: string;
+  html?: string;
+  visible?: boolean;
+  iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
+  width?: string | number;
+  height?: string | number;
+  externalRef?: RefObject<HTMLIFrameElement>;
+  onLoad?: () => void;
+  onMessage?: (message: any) => void;
+  onClick?: () => void;
+  onAutoResized?: () => void;
+};
+
+const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
+  {
+    autoResize,
+    className,
+    html,
+    visible,
+    iFrameProps,
+    width,
+    height,
+    externalRef,
+    onLoad,
+    onMessage,
+    onClick,
+    onAutoResized,
+  },
+  ref,
+) => {
+  const {
+    ref: iFrameRef,
+    props,
+    onLoad: onIFrameLoad,
+  } = useHook({
+    width,
+    height,
+    visible,
+    iFrameProps,
+    autoResize,
+    html,
+    ref,
+    onLoad,
+    onMessage,
+    onClick,
+    onAutoResized,
+  });
+
+  return html ? (
+    <iframe
+      frameBorder="no"
+      scrolling={autoResize ? undefined : "no"}
+      data-testid="iframe"
+      srcDoc=""
+      key={html}
+      ref={composeRefs(iFrameRef, externalRef)}
+      className={className}
+      onLoad={onIFrameLoad}
+      {...props}
+    />
+  ) : null;
+};
+
+export default React.forwardRef(IFrame);
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts b/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts
new file mode 100644
index 0000000000..653241b266
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/hooks.ts
@@ -0,0 +1,57 @@
+import { ForwardedRef, useCallback, useImperativeHandle } from "react";
+
+import useIFrame, { IFrameAPI } from "./useIFrame";
+
+export type { IFrameAPI } from "./useIFrame";
+
+export type Ref = {
+  api: IFrameAPI;
+  reset: () => void;
+};
+
+export default function useHooks({
+  ref,
+  ready,
+  visible,
+  type,
+  enabled,
+  onRender,
+}: {
+  ref?: ForwardedRef<Ref>;
+  ready?: boolean;
+  visible?: boolean;
+  type?: string;
+  enabled?: boolean;
+  onRender?: (type: string) => void;
+}) {
+  const handleRender = useCallback(() => type && onRender?.(type), [type, onRender]);
+
+  const {
+    ref: IFrameRef,
+    api,
+    html,
+    options,
+    handleLoad,
+    reset,
+  } = useIFrame({
+    ready,
+    enabled,
+    visible,
+    onRender: handleRender,
+  });
+
+  useImperativeHandle(
+    ref,
+    (): Ref => ({
+      api,
+      reset,
+    }),
+  );
+
+  return {
+    ref: IFrameRef,
+    html,
+    options,
+    handleLoad,
+  };
+}
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx b/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
new file mode 100644
index 0000000000..f01b273243
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/index.tsx
@@ -0,0 +1,96 @@
+import { forwardRef, ForwardRefRenderFunction, IframeHTMLAttributes, ReactNode, memo } from "react";
+import type { RefObject } from "react";
+import { createPortal } from "react-dom";
+
+import useExperimentalSandbox from "../../useExperimentalSandbox";
+import IFrame, { AutoResize } from "../IFrame";
+import SafeIframe from "../SafeIFrame";
+
+import useHooks, { Ref } from "./hooks";
+
+export type { AutoResize } from "../IFrame";
+export type { IFrameAPI, Ref } from "./hooks";
+
+export type Props = {
+  className?: string;
+  type: string;
+  visible?: boolean;
+  ready?: boolean;
+  enabled?: boolean;
+  autoResize?: AutoResize;
+  iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
+  renderPlaceholder?: ReactNode;
+  container?: HTMLElement | DocumentFragment;
+  externalRef?: RefObject<HTMLIFrameElement>;
+  onRender?: (type: string) => void;
+  onClick?: () => void;
+  onMessage?: (message: any) => void;
+};
+
+const PluginIFrame: ForwardRefRenderFunction<Ref, Props> = (
+  {
+    className,
+    type,
+    visible,
+    ready,
+    enabled,
+    autoResize,
+    iFrameProps,
+    renderPlaceholder,
+    container,
+    externalRef,
+    onRender,
+    onClick,
+    onMessage,
+  },
+  ref,
+) => {
+  const {
+    ref: iFrameRef,
+    html,
+    options,
+    handleLoad,
+  } = useHooks({ ready, ref, visible, type, enabled, onRender });
+
+  const experimentalSandbox = useExperimentalSandbox();
+
+  const children = (
+    <>
+      {html ? (
+        experimentalSandbox ? (
+          <SafeIframe
+            ref={iFrameRef}
+            className={className}
+            iFrameProps={iFrameProps}
+            html={html}
+            autoResize={autoResize}
+            externalRef={externalRef}
+            onMessage={onMessage}
+            onClick={onClick}
+            onLoad={handleLoad}
+            {...options}
+          />
+        ) : (
+          <IFrame
+            ref={iFrameRef}
+            className={className}
+            iFrameProps={iFrameProps}
+            html={html}
+            autoResize={autoResize}
+            externalRef={externalRef}
+            onMessage={onMessage}
+            onClick={onClick}
+            onLoad={handleLoad}
+            {...options}
+          />
+        )
+      ) : renderPlaceholder ? (
+        <>{renderPlaceholder}</>
+      ) : null}
+    </>
+  );
+
+  return enabled ? (container ? createPortal(children, container) : children) : null;
+};
+
+export default memo(forwardRef(PluginIFrame));
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts b/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts
new file mode 100644
index 0000000000..f6b8b08790
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/useIFrame.ts
@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import type { Ref as IFrameRef } from "../IFrame";
+
+import { usePostMessage } from "./usePostMessage";
+
+export type IFrameAPI = {
+  render: (
+    html: string,
+    options?: {
+      visible?: boolean;
+      width?: number | string;
+      height?: number | string;
+      onAutoResized?: () => void;
+    },
+  ) => void;
+  resize: (width: string | number | undefined, height: string | number | undefined) => void;
+  postMessage: (message: any) => void;
+};
+
+export default function useIFrame({
+  ready,
+  enabled,
+  visible: iframeCanBeVisible,
+  onRender,
+}: {
+  ready?: boolean;
+  enabled?: boolean;
+  visible?: boolean;
+  onRender?: () => void;
+}) {
+  const ref = useRef<IFrameRef>(null);
+  const [iFrameLoaded, setIFrameLoaded] = useState(false);
+  const [[html, options], setIFrameState] = useState<
+    [
+      string,
+      (
+        | {
+            visible?: boolean;
+            width?: number | string;
+            height?: number | string;
+            onAutoResized?: () => void;
+          }
+        | undefined
+      ),
+    ]
+  >(["", undefined]);
+  const postMessage = usePostMessage(ref, !ready || !iFrameLoaded);
+  const handleLoad = useCallback(() => setIFrameLoaded(true), []);
+  const reset = useCallback(() => setIFrameState(["", undefined]), []);
+
+  const api = useMemo<IFrameAPI>(
+    () => ({
+      render: (html, { visible = true, ...options } = {}) => {
+        setIFrameState([html, { visible: !!iframeCanBeVisible && !!visible, ...options }]);
+        onRender?.();
+      },
+      resize: (width, height) => {
+        ref.current?.resize(width, height);
+      },
+      postMessage,
+    }),
+    [iframeCanBeVisible, onRender, postMessage],
+  );
+
+  useEffect(() => {
+    setIFrameState(([html, options]) => [html, { ...options, visible: !!iframeCanBeVisible }]);
+  }, [iframeCanBeVisible]);
+
+  useEffect(() => {
+    if (!ready || !enabled) setIFrameLoaded(false);
+  }, [ready, enabled]);
+
+  return {
+    ref,
+    api,
+    html,
+    options,
+    handleLoad,
+    reset,
+  };
+}
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts b/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts
new file mode 100644
index 0000000000..6274fe997b
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.test.ts
@@ -0,0 +1,41 @@
+import { renderHook } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+
+import { usePostMessage } from "./usePostMessage";
+
+test("usePostMessage", () => {
+  type P = Parameters<typeof usePostMessage>[0];
+  const nullIFrame: P = { current: null };
+  const iFrame: P = {
+    current: {
+      postMessage: vi.fn(),
+      resize: () => {},
+    },
+  };
+
+  const { result, rerender } = renderHook(
+    ({ iFrame, pending }: { iFrame: P; pending?: boolean }) => usePostMessage(iFrame, pending),
+    {
+      initialProps: { iFrame: nullIFrame },
+    },
+  );
+
+  result.current({ hoge: true });
+  expect(iFrame.current?.postMessage).toBeCalledTimes(0);
+
+  rerender({ iFrame });
+  expect(iFrame.current?.postMessage).toBeCalledTimes(1);
+  expect(iFrame.current?.postMessage).toBeCalledWith({ hoge: true });
+
+  result.current({ foo: true });
+  expect(iFrame.current?.postMessage).toBeCalledTimes(2);
+  expect(iFrame.current?.postMessage).toBeCalledWith({ foo: true });
+
+  rerender({ iFrame, pending: true });
+  result.current({ bar: true });
+  expect(iFrame.current?.postMessage).toBeCalledTimes(2);
+
+  rerender({ iFrame, pending: false });
+  expect(iFrame.current?.postMessage).toBeCalledTimes(3);
+  expect(iFrame.current?.postMessage).toBeCalledWith({ bar: true });
+});
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.ts b/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.ts
new file mode 100644
index 0000000000..9ade333753
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/PluginIFrame/usePostMessage.ts
@@ -0,0 +1,38 @@
+import { RefObject, useCallback, useEffect, useRef } from "react";
+
+import type { Ref } from "../IFrame";
+
+export function usePostMessage(iFrameRef: RefObject<Ref>, pending?: boolean) {
+  const messageQueue = useRef<any[]>([]);
+  const available = typeof pending !== "boolean" || !pending;
+  const availableRef = useRef(available);
+  const postMessage = useCallback(
+    (msg: any) => {
+      try {
+        const message = JSON.parse(JSON.stringify(msg));
+        if (iFrameRef.current && availableRef.current) {
+          iFrameRef.current.postMessage(message);
+        } else {
+          messageQueue.current.push(message);
+        }
+      } catch (err) {
+        console.error("plugin error: failed to post message", err);
+      }
+    },
+    [iFrameRef],
+  );
+
+  useEffect(() => {
+    if (available && iFrameRef.current) {
+      if (messageQueue.current.length) {
+        for (const message of messageQueue.current) {
+          iFrameRef.current.postMessage(message);
+        }
+        messageQueue.current = [];
+      }
+    }
+    availableRef.current = available;
+  }, [iFrameRef, available]);
+
+  return postMessage;
+}
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts b/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
new file mode 100644
index 0000000000..1e157ec81d
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/hooks.ts
@@ -0,0 +1,171 @@
+import {
+  IframeHTMLAttributes,
+  Ref,
+  RefObject,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { insertToBody } from "./utils";
+
+export type RefType = {
+  postMessage: (message: any) => void;
+  resize: (width: string | number | undefined, height: string | number | undefined) => void;
+};
+
+export type AutoResize = "both" | "width-only" | "height-only";
+
+export default function useHook({
+  autoResizeMessageKey = "___iframe_auto_resize___",
+  width,
+  height,
+  html,
+  ref,
+  autoResize,
+  visible,
+  iFrameProps,
+  onLoad,
+  onMessage,
+  onClick,
+  onAutoResized,
+}: {
+  width?: number | string;
+  height?: number | string;
+  autoResizeMessageKey?: string;
+  html?: string;
+  ref?: Ref<RefType>;
+  autoResize?: AutoResize;
+  visible?: boolean;
+  iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
+  onLoad?: () => void;
+  onMessage?: (message: any) => void;
+  onClick?: () => void;
+  onAutoResized?: () => void;
+} = {}): {
+  ref: RefObject<HTMLIFrameElement>;
+  props: IframeHTMLAttributes<HTMLIFrameElement>;
+  srcDoc: string;
+  onLoad?: () => void;
+} {
+  const loaded = useRef(false);
+  const iFrameRef = useRef<HTMLIFrameElement>(null);
+  const [iFrameSize, setIFrameSize] = useState<[string | undefined, string | undefined]>();
+  const pendingMesages = useRef<any[]>([]);
+
+  useImperativeHandle(
+    ref,
+    (): RefType => ({
+      postMessage: message => {
+        if (!loaded.current || !iFrameRef.current?.contentWindow) {
+          pendingMesages.current.push(message);
+          return;
+        }
+        iFrameRef.current.contentWindow.postMessage(message, "*");
+      },
+      resize: (width, height) => {
+        const width2 = typeof width === "number" ? width + "px" : width ?? undefined;
+        const height2 = typeof height === "number" ? height + "px" : height ?? undefined;
+        setIFrameSize(width2 || height2 ? [width2, height2] : undefined);
+      },
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    const cb = (ev: MessageEvent<any>) => {
+      if (!iFrameRef.current || ev.source !== iFrameRef.current.contentWindow) return;
+      if (ev.data?.[autoResizeMessageKey]) {
+        const { width, height } = ev.data[autoResizeMessageKey];
+        if (typeof width !== "number" || typeof height !== "number") return;
+        setIFrameSize([width + "px", height + "px"]);
+        onAutoResized?.();
+      } else {
+        onMessage?.(ev.data);
+      }
+    };
+    window.addEventListener("message", cb);
+    return () => {
+      window.removeEventListener("message", cb);
+    };
+  }, [autoResize, autoResizeMessageKey, onMessage, onAutoResized]);
+
+  const onIframeLoad = useCallback(() => {
+    loaded.current = true;
+    onLoad?.();
+  }, [onLoad]);
+
+  const props = useMemo<IframeHTMLAttributes<HTMLIFrameElement>>(
+    () => ({
+      ...iFrameProps,
+      style: {
+        display: visible ? "block" : "none",
+        width: visible
+          ? !autoResize || autoResize == "height-only"
+            ? "100%"
+            : iFrameSize?.[0]
+          : "0px",
+        height: visible
+          ? !autoResize || autoResize == "width-only"
+            ? "100%"
+            : iFrameSize?.[1]
+          : "0px",
+        ...iFrameProps?.style,
+      },
+    }),
+    [autoResize, iFrameProps, iFrameSize, visible],
+  );
+
+  useEffect(() => {
+    const handleBlur = () => {
+      if (iFrameRef.current && iFrameRef.current === document.activeElement) {
+        onClick?.();
+      }
+    };
+    window.addEventListener("blur", handleBlur);
+    return () => {
+      window.removeEventListener("blur", handleBlur);
+    };
+  }, [onClick]);
+
+  useEffect(() => {
+    const w = typeof width === "number" ? width + "px" : width;
+    const h = typeof height === "number" ? height + "px" : height;
+    setIFrameSize(w || h ? [w, h] : undefined);
+  }, [width, height]);
+
+  const autoResizeScript = useMemo(() => {
+    return `<script id="_reearth_resize">
+      if ("ResizeObserver" in window) {         
+        new window.ResizeObserver(entries => {
+          const win = document.defaultView;
+          const html = document.body.parentElement;
+          const st = win.getComputedStyle(html, "");
+          horizontalMargin = parseInt(st.getPropertyValue("margin-left"), 10) + parseInt(st.getPropertyValue("margin-right"), 10);
+          verticalMargin = parseInt(st.getPropertyValue("margin-top"), 10) + parseInt(st.getPropertyValue("margin-bottom"), 10);
+          const width = html.offsetWidth + horizontalMargin;
+          const height = html.offsetHeight + verticalMargin;
+          if(parent){
+            parent.postMessage({
+              [${JSON.stringify(autoResizeMessageKey)}]: { width, height }
+            }, "*")
+          }
+        }).observe(document.body.parentElement);
+      }
+    </script>`;
+  }, [autoResizeMessageKey]);
+
+  const srcDoc = useMemo(() => {
+    return insertToBody(html, autoResizeScript);
+  }, [html, autoResizeScript]);
+
+  return {
+    ref: iFrameRef,
+    props,
+    srcDoc,
+    onLoad: onIframeLoad,
+  };
+}
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx b/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
new file mode 100644
index 0000000000..443214c9a8
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/index.stories.tsx
@@ -0,0 +1,48 @@
+import { Meta, Story } from "@storybook/react";
+import { useRef } from "react";
+
+import Component, { Props, Ref } from ".";
+
+export default {
+  component: Component,
+  argTypes: {
+    onLoad: { action: "onLoad" },
+    onMessage: { action: "onMessage" },
+  },
+  // parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => {
+  const ref = useRef<Ref>(null);
+  const postMessage = () => {
+    ref.current?.postMessage({ foo: new Date().toISOString() });
+  };
+  return (
+    <div style={{ background: "#fff" }}>
+      <Component {...args} ref={ref} />
+      <p>
+        <button onClick={postMessage}>postMessage</button>
+      </p>
+    </div>
+  );
+};
+
+Default.args = {
+  visible: true,
+  iFrameProps: {
+    style: {
+      width: "400px",
+      height: "300px",
+    },
+  },
+  html: `<h1>iframe</h1><script>
+  window.addEventListener("message", ev => {
+    if (ev.source !== parent) return;
+    const p = document.createElement("p");
+    p.textContent = JSON.stringify(ev.data);
+    document.body.appendChild(p);
+    parent.postMessage(ev.data, "*");
+  });
+  parent.postMessage("loaded", "*");
+</script>`,
+};
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx b/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
new file mode 100644
index 0000000000..2f3b03b423
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/index.tsx
@@ -0,0 +1,79 @@
+import composeRefs from "@seznam/compose-react-refs";
+import React, { IframeHTMLAttributes } from "react";
+import type { RefObject } from "react";
+
+import useHook, { RefType, AutoResize as AutoResizeType } from "./hooks";
+
+export type Ref = RefType;
+
+export type AutoResize = AutoResizeType;
+
+export type Props = {
+  autoResize?: AutoResize;
+  className?: string;
+  html?: string;
+  visible?: boolean;
+  iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
+  width?: string | number;
+  height?: string | number;
+  externalRef?: RefObject<HTMLIFrameElement>;
+  onLoad?: () => void;
+  onMessage?: (message: any) => void;
+  onClick?: () => void;
+  onAutoResized?: () => void;
+};
+
+const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
+  {
+    autoResize,
+    className,
+    html,
+    visible,
+    iFrameProps,
+    width,
+    height,
+    externalRef,
+    onLoad,
+    onMessage,
+    onClick,
+    onAutoResized,
+  },
+  ref,
+) => {
+  const {
+    ref: iFrameRef,
+    props,
+    onLoad: onIFrameLoad,
+    srcDoc,
+  } = useHook({
+    width,
+    height,
+    visible,
+    iFrameProps,
+    autoResize,
+    html,
+    ref,
+    onLoad,
+    onMessage,
+    onClick,
+    onAutoResized,
+  });
+
+  return html ? (
+    <iframe
+      frameBorder="no"
+      scrolling={autoResize ? undefined : "no"}
+      data-testid="iframe"
+      srcDoc={srcDoc}
+      key={html}
+      ref={composeRefs(iFrameRef, externalRef)}
+      className={className}
+      onLoad={onIFrameLoad}
+      sandbox="allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox"
+      allow="geolocation; camera"
+      {...props}
+    />
+  ) : null;
+};
+
+export default React.forwardRef(IFrame);
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts b/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
new file mode 100644
index 0000000000..190e5869b8
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.test.ts
@@ -0,0 +1,24 @@
+import { expect, test } from "vitest";
+
+import { insertToBody } from "./utils";
+
+test("insertScriptToBody", () => {
+  const script = `<script id="insert-script"></script>`;
+  const html1 = `<div></div>`;
+  expect(insertToBody(html1, script)).toEqual(`<div></div><script id="insert-script"></script>`);
+
+  const html2 = `<html><body></body></html>`;
+  expect(insertToBody(html2, script)).toEqual(
+    `<html><body><script id="insert-script"></script></body></html>`,
+  );
+
+  const html3 = `<html><BODY></BODY></html>`;
+  expect(insertToBody(html3, script)).toEqual(
+    `<html><BODY><script id="insert-script"></script></BODY></html>`,
+  );
+
+  const html4 = `<html><body><script>const a = '<body></body>'</script></body></html>`;
+  expect(insertToBody(html4, script)).toEqual(
+    `<html><body><script>const a = '<body></body>'</script><script id="insert-script"></script></body></html>`,
+  );
+});
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.ts b/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.ts
new file mode 100644
index 0000000000..1d37134684
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/SafeIFrame/utils.ts
@@ -0,0 +1,8 @@
+export const insertToBody = (html: string | undefined, insertStr: string) => {
+  if (html === undefined) return "";
+  let lastBodyIndex = html.lastIndexOf("</body>");
+  if (lastBodyIndex < 0) lastBodyIndex = html.lastIndexOf("</BODY>");
+  return lastBodyIndex < 0
+    ? `${html}${insertStr}`
+    : `${html.substring(0, lastBodyIndex)}${insertStr}${html.substring(lastBodyIndex)}`;
+};
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/hooks.ts b/web/src/beta/core/Crust/Plugins/PluginFrame/hooks.ts
new file mode 100644
index 0000000000..755b33d940
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/hooks.ts
@@ -0,0 +1,258 @@
+import { getQuickJS } from "quickjs-emscripten";
+import { Arena } from "quickjs-emscripten-sync";
+import type { RefObject } from "react";
+import {
+  ForwardedRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { IFrameAPI, Ref as IFrameRef } from "./PluginIFrame";
+
+export type Options = {
+  src?: string;
+  sourceCode?: string;
+  skip?: boolean;
+  isMarshalable?: boolean | "json" | ((obj: any) => boolean | "json");
+  ref?: ForwardedRef<Ref>;
+  mainIFrameRef?: RefObject<IFrameRef>;
+  exposed?: ((api: API) => { [key: string]: any }) | { [key: string]: any };
+  onError?: (err: any) => void;
+  onPreInit?: () => void;
+  onDispose?: () => void;
+  onMessage?: (msg: any) => void;
+};
+
+export type IFrameType = "main" | "modal" | "popup";
+
+export type API = {
+  main: IFrameAPI;
+  modal: IFrameAPI;
+  popup: IFrameAPI;
+  messages: {
+    on: (e: (msg: any) => void) => void;
+    off: (e: (msg: any) => void) => void;
+    once: (e: (msg: any) => void) => void;
+  };
+  startEventLoop: () => void;
+};
+
+export type Ref = {
+  arena: () => Arena | undefined;
+};
+
+const AsyncFunction = (async () => {}).constructor;
+
+// restrict any classes
+export const defaultIsMarshalable = (obj: any): boolean => {
+  return (
+    ((typeof obj !== "object" || obj === null) && typeof obj !== "function") ||
+    Array.isArray(obj) ||
+    Object.getPrototypeOf(obj) === Function.prototype ||
+    Object.getPrototypeOf(obj) === Object.prototype ||
+    obj instanceof Date ||
+    obj instanceof Promise ||
+    obj instanceof AsyncFunction
+  );
+};
+
+const defaultOnError = (err: any) => {
+  console.error("plugin error", err);
+};
+
+export default function useHook({
+  src,
+  sourceCode,
+  skip,
+  isMarshalable,
+  ref,
+  exposed,
+  onPreInit,
+  onError = defaultOnError,
+  onDispose,
+  onMessage: rawOnMessage,
+}: Options = {}) {
+  const arena = useRef<Arena | undefined>();
+  const eventLoop = useRef<number>();
+  const [loaded, setLoaded] = useState(false);
+  const [code, setCode] = useState("");
+
+  const mainIFrameRef = useRef<IFrameRef>(null);
+  const modalIFrameRef = useRef<IFrameRef>(null);
+  const popupIFrameRef = useRef<IFrameRef>(null);
+
+  const messageEvents = useMemo(() => new Set<(msg: any) => void>(), []);
+  const messageOnceEvents = useMemo(() => new Set<(msg: any) => void>(), []);
+  const onMessage = useCallback(
+    (e: (msg: any) => void) => {
+      messageEvents.add(e);
+    },
+    [messageEvents],
+  );
+  const offMessage = useCallback(
+    (e: (msg: any) => void) => {
+      messageEvents.delete(e);
+    },
+    [messageEvents],
+  );
+  const onceMessage = useCallback(
+    (e: (msg: any) => void) => {
+      messageOnceEvents.add(e);
+    },
+    [messageOnceEvents],
+  );
+  const handleMessage = useCallback(
+    (msg: any) => {
+      try {
+        messageEvents.forEach(e => e(msg));
+        messageOnceEvents.forEach(e => e(msg));
+      } catch (e) {
+        onError(e);
+      }
+      rawOnMessage?.(msg);
+      messageOnceEvents.clear();
+    },
+    [messageEvents, messageOnceEvents, onError, rawOnMessage],
+  );
+
+  const eventLoopCb = useCallback(() => {
+    if (!arena.current) return;
+    try {
+      arena.current.executePendingJobs();
+      if (arena.current.context.runtime.hasPendingJob()) {
+        eventLoop.current = window.setTimeout(eventLoopCb, 0);
+      }
+    } catch (err) {
+      onError(err);
+    }
+  }, [onError]);
+
+  const startEventLoop = useCallback(() => {
+    eventLoop.current = window.setTimeout(eventLoopCb, 0);
+  }, [eventLoopCb]);
+
+  const evalCode = useCallback(
+    (code: string): any => {
+      if (!arena.current) return;
+
+      let result: any;
+      try {
+        result = arena.current.evalCode(code);
+      } catch (err) {
+        onError(err);
+      }
+
+      startEventLoop();
+
+      return result;
+    },
+    [onError, startEventLoop],
+  );
+
+  useEffect(() => {
+    (async () => {
+      const code = sourceCode ?? (src ? await (await fetch(src)).text() : "");
+      setCode(code);
+    })();
+  }, [sourceCode, src]);
+
+  // init and dispose of vm
+  useEffect(() => {
+    if (skip || !code) return;
+    const { api: mainIFrameApi } = mainIFrameRef.current ?? {};
+    const { api: modalIFrameApi } = modalIFrameRef.current ?? {};
+    const { api: popupIFrameApi } = popupIFrameRef.current ?? {};
+    if (!mainIFrameApi || !modalIFrameApi || !popupIFrameApi) return;
+
+    onPreInit?.();
+
+    (async () => {
+      const ctx = (await getQuickJS()).newContext();
+      arena.current = new Arena(ctx, {
+        isMarshalable: target =>
+          defaultIsMarshalable(target) ||
+          (typeof isMarshalable === "function" ? isMarshalable(target) : "json"),
+        experimentalContextEx: true,
+      });
+
+      const e =
+        typeof exposed === "function"
+          ? exposed({
+              main: mainIFrameApi,
+              modal: modalIFrameApi,
+              popup: popupIFrameApi,
+              messages: {
+                on: onMessage,
+                off: offMessage,
+                once: onceMessage,
+              },
+              startEventLoop,
+            })
+          : exposed;
+      if (e) {
+        arena.current.expose(e);
+      }
+
+      evalCode(code);
+      setLoaded(true);
+    })();
+
+    const iframeRef = mainIFrameRef.current;
+
+    return () => {
+      onDispose?.();
+      messageEvents.clear();
+      messageOnceEvents.clear();
+      iframeRef?.reset();
+      setLoaded(false);
+      if (typeof eventLoop.current === "number") {
+        window.clearTimeout(eventLoop.current);
+      }
+      if (arena.current) {
+        try {
+          arena.current.dispose();
+          arena.current.context.dispose();
+        } catch (err) {
+          console.debug("quickjs-emscripten dispose error", err);
+        } finally {
+          arena.current = undefined;
+        }
+      }
+    };
+  }, [
+    code,
+    evalCode,
+    isMarshalable,
+    onDispose,
+    onPreInit,
+    skip,
+    exposed,
+    onMessage,
+    offMessage,
+    onceMessage,
+    mainIFrameRef,
+    messageEvents,
+    messageOnceEvents,
+    startEventLoop,
+  ]);
+
+  useImperativeHandle(
+    ref,
+    (): Ref => ({
+      arena: () => arena.current,
+    }),
+    [],
+  );
+
+  return {
+    mainIFrameRef,
+    modalIFrameRef,
+    popupIFrameRef,
+    loaded,
+    handleMessage,
+  };
+}
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/index.stories.tsx b/web/src/beta/core/Crust/Plugins/PluginFrame/index.stories.tsx
new file mode 100644
index 0000000000..93015b4a44
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/index.stories.tsx
@@ -0,0 +1,136 @@
+import { action } from "@storybook/addon-actions";
+import { Meta, Story } from "@storybook/react";
+import { useRef } from "react";
+
+import Component, { Props, Ref } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => <Component {...args} />;
+
+let cb: (message: any) => void | undefined;
+
+Default.args = {
+  src: `/plugins/plugin.js`,
+  uiVisible: true,
+  iFrameProps: {
+    style: {
+      width: "300px",
+      height: "300px",
+      backgroundColor: "#fff",
+    },
+  },
+  exposed: ({ main: { render, postMessage } }) => ({
+    console: {
+      log: action("console.log"),
+    },
+    reearth: {
+      on(type: string, value: (message: any) => void | undefined) {
+        if (type === "message") {
+          cb = value;
+        }
+      },
+      ui: {
+        show: render,
+        postMessage,
+      },
+    },
+  }),
+  onMessage: (message: any) => {
+    action("onMessage")(message);
+    return cb?.(message);
+  },
+};
+
+export const HiddenIFrame: Story<Props> = args => <Component {...args} />;
+
+HiddenIFrame.args = {
+  src: `/plugins/hidden.js`,
+  uiVisible: true,
+  iFrameProps: {
+    style: {
+      width: "300px",
+      height: "300px",
+      backgroundColor: "#fff",
+    },
+  },
+  exposed: ({ main: { render, postMessage } }) => ({
+    console: {
+      log: action("console.log"),
+    },
+    reearth: {
+      on(type: string, value: (message: any) => void | undefined) {
+        if (type === "message") {
+          cb = value;
+        }
+      },
+      ui: {
+        show: render,
+        postMessage,
+      },
+    },
+  }),
+  onMessage: (message: any) => {
+    action("onMessage")(message);
+    return cb?.(message);
+  },
+};
+
+export const SourceCode: Story<Props> = args => <Component {...args} />;
+
+SourceCode.args = {
+  sourceCode: `console.log("Hello")`,
+  exposed: {
+    console: {
+      log: action("console.log"),
+    },
+  },
+};
+
+export const AutoResize: Story<Props> = args => {
+  const ref = useRef<Ref>(null);
+  return (
+    <Component
+      {...args}
+      onMessage={msg => {
+        ref.current
+          ?.arena()
+          ?.evalCode(`"onmessage" in globalThis && globalThis.onmessage(${JSON.stringify(msg)})`);
+      }}
+      ref={ref}
+    />
+  );
+};
+
+AutoResize.args = {
+  sourceCode: `
+    render(\`
+      <style>body{width: 100px; height: 50px; background:yellow}</style>
+      <h1 id="s"></h1>
+      <script>
+        let a = false;
+        const s = document.getElementById("s");
+
+        setInterval(() => {
+          a = !a;
+          const w = a ? "300px" : "100px";
+          document.body.style.width = w;
+          parent.postMessage({ width: w }, "*");
+        }, 1000);
+
+        const resize = () => {
+          s.textContent = window.innerWidth + "x" + window.innerHeight;
+        };
+        window.onresize = resize;
+        resize();
+      </script>
+    \`);
+    onmessage = msg => { resize(msg.width, msg.height); };
+  `,
+  autoResize: "both",
+  uiVisible: true,
+  exposed: ({ main: { render, resize } }) => ({ render, resize }),
+};
diff --git a/web/src/beta/core/Crust/Plugins/PluginFrame/index.tsx b/web/src/beta/core/Crust/Plugins/PluginFrame/index.tsx
new file mode 100644
index 0000000000..0a5a231701
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/PluginFrame/index.tsx
@@ -0,0 +1,118 @@
+import { forwardRef, ForwardRefRenderFunction, IframeHTMLAttributes, ReactNode } from "react";
+import type { RefObject } from "react";
+
+import useHook, { defaultIsMarshalable, IFrameType, API, Ref } from "./hooks";
+import PluginIFrame, { AutoResize } from "./PluginIFrame";
+
+export { defaultIsMarshalable };
+
+export type { AutoResize } from "./PluginIFrame";
+export type { API, IFrameType, Ref } from "./hooks";
+
+export type Props = {
+  className?: string;
+  uiVisible?: boolean;
+  skip?: boolean;
+  src?: string;
+  sourceCode?: string;
+  renderPlaceholder?: ReactNode;
+  autoResize?: AutoResize;
+  iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
+  modalContainer?: HTMLElement | DocumentFragment;
+  popupContainer?: HTMLElement | DocumentFragment;
+  modalVisible?: boolean;
+  popupVisible?: boolean;
+  externalRef?: RefObject<HTMLIFrameElement>;
+  isMarshalable?: boolean | "json" | ((target: any) => boolean | "json");
+  exposed?: ((api: API) => { [key: string]: any }) | { [key: string]: any };
+  onMessage?: (message: any) => void;
+  onPreInit?: () => void;
+  onError?: (err: any) => void;
+  onDispose?: () => void;
+  onClick?: () => void;
+  onRender?: (type: IFrameType) => void;
+};
+
+const Plugin: ForwardRefRenderFunction<Ref, Props> = (
+  {
+    className,
+    uiVisible,
+    modalVisible,
+    popupVisible,
+    skip,
+    src,
+    sourceCode,
+    renderPlaceholder,
+    autoResize,
+    iFrameProps,
+    isMarshalable,
+    modalContainer,
+    popupContainer,
+    externalRef,
+    exposed,
+    onPreInit,
+    onError,
+    onDispose,
+    onClick,
+    onMessage,
+    onRender,
+  },
+  ref,
+) => {
+  const { mainIFrameRef, modalIFrameRef, popupIFrameRef, loaded, handleMessage } = useHook({
+    src,
+    sourceCode,
+    skip,
+    isMarshalable,
+    ref,
+    exposed,
+    onError,
+    onPreInit,
+    onDispose,
+    onMessage,
+  });
+
+  return (
+    <>
+      <PluginIFrame
+        type="main"
+        ref={mainIFrameRef}
+        ready={loaded}
+        visible={uiVisible}
+        enabled
+        className={className}
+        iFrameProps={iFrameProps}
+        autoResize={autoResize}
+        renderPlaceholder={renderPlaceholder}
+        externalRef={externalRef}
+        onClick={onClick}
+        onRender={onRender as (type: string) => void}
+        onMessage={handleMessage}
+      />
+      <PluginIFrame
+        type="modal"
+        ref={modalIFrameRef}
+        container={modalContainer}
+        visible
+        enabled={modalVisible}
+        ready={loaded}
+        autoResize="both"
+        onRender={onRender as (type: string) => void}
+        onMessage={handleMessage}
+      />
+      <PluginIFrame
+        type="popup"
+        ref={popupIFrameRef}
+        container={popupContainer}
+        visible
+        enabled={popupVisible}
+        ready={loaded}
+        autoResize="both"
+        onRender={onRender as (type: string) => void}
+        onMessage={handleMessage}
+      />
+    </>
+  );
+};
+
+export default forwardRef(Plugin);
diff --git a/web/src/beta/core/Crust/Plugins/api.ts b/web/src/beta/core/Crust/Plugins/api.ts
new file mode 100644
index 0000000000..245c4a6f1c
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/api.ts
@@ -0,0 +1,566 @@
+import type { Tag } from "@reearth/beta/core/mantle/compat";
+import {
+  Events,
+  Layer,
+  LayerSelectionReason,
+  LayersRef,
+  NaiveLayer,
+  LazyLayer,
+} from "@reearth/beta/core/Map";
+import { merge } from "@reearth/beta/utils/object";
+
+import type { Block } from "../Infobox";
+import type { MapRef } from "../types";
+import type { Widget, WidgetLocationOptions } from "../Widgets";
+
+import type { GlobalThis, ReearthEventType, Reearth, Plugin, PopupPosition } from "./plugin_types";
+import type { ClientStorage } from "./useClientStorage";
+import type { PluginInstances } from "./usePluginInstances";
+
+export type CommonReearth = Omit<
+  Reearth,
+  "plugin" | "ui" | "modal" | "popup" | "block" | "layer" | "widget" | "clientStorage"
+>;
+
+export function exposed({
+  render,
+  closeUI,
+  postMessage,
+  resize,
+  renderModal,
+  closeModal,
+  updateModal,
+  postMessageModal,
+  renderPopup,
+  closePopup,
+  updatePopup,
+  postMessagePopup,
+  events,
+  commonReearth,
+  plugin,
+  layer,
+  block,
+  widget,
+  startEventLoop,
+  overrideSceneProperty,
+  moveWidget,
+  pluginPostMessage,
+  clientStorage,
+}: {
+  render: (
+    html: string,
+    options?: {
+      visible?: boolean;
+      width?: string | number;
+      height?: string | number;
+      extended?: boolean;
+    },
+  ) => void;
+  closeUI: Reearth["ui"]["close"];
+  postMessage: Reearth["ui"]["postMessage"];
+  resize: Reearth["ui"]["resize"];
+  renderModal: (
+    html: string,
+    options?: {
+      width?: string | number;
+      height?: string | number;
+      background?: string;
+    },
+  ) => void;
+  closeModal: Reearth["modal"]["close"];
+  updateModal: Reearth["modal"]["update"];
+  postMessageModal: Reearth["modal"]["postMessage"];
+  renderPopup: Reearth["popup"]["show"];
+  closePopup: Reearth["popup"]["close"];
+  updatePopup: Reearth["popup"]["update"];
+  postMessagePopup: Reearth["popup"]["postMessage"];
+  events: Events<ReearthEventType>;
+  commonReearth: CommonReearth;
+  plugin?: Plugin;
+  layer?: () => Layer | undefined;
+  block?: () => Block | undefined;
+  widget?: () => Widget | undefined;
+  startEventLoop?: () => void;
+  overrideSceneProperty?: (pluginId: string, property: any) => void;
+  moveWidget?: (widgetId: string, options: WidgetLocationOptions) => void;
+  pluginPostMessage: (extentionId: string, msg: any, sender: string) => void;
+  clientStorage: ClientStorage;
+}): GlobalThis {
+  return merge({
+    console: {
+      error: console.error,
+      log: console.log,
+    },
+    reearth: merge(
+      commonReearth,
+      {
+        visualizer: merge(commonReearth.visualizer, {
+          get overrideProperty() {
+            return (property: any) => {
+              overrideSceneProperty?.(plugin ? `${plugin.id}/${plugin.extensionId}` : "", property);
+            };
+          },
+        }),
+        layers: merge(commonReearth.layers, {
+          get add() {
+            return (layer: NaiveLayer) => commonReearth.layers?.add?.(layer);
+          },
+        }),
+        ui: {
+          show: (
+            html: string,
+            options?:
+              | {
+                  visible?: boolean | undefined;
+                }
+              | undefined,
+          ) => {
+            render(html, options);
+          },
+          postMessage,
+          resize,
+          close: closeUI,
+        },
+        modal: {
+          show: (
+            html: string,
+            options?: {
+              width?: number | string;
+              height?: number | string;
+              background?: string;
+            },
+          ) => {
+            renderModal(html, options);
+          },
+          postMessage: postMessageModal,
+          update: updateModal,
+          close: closeModal,
+        },
+        popup: {
+          show: (
+            html: string,
+            options?: {
+              width?: number | string;
+              height?: number | string;
+              position?: PopupPosition;
+              offset?: number;
+            },
+          ) => {
+            renderPopup(html, options);
+          },
+          postMessage: postMessagePopup,
+          update: updatePopup,
+          close: closePopup,
+        },
+        scene: merge(commonReearth.scene, {
+          get overrideProperty() {
+            return (property: any) => {
+              overrideSceneProperty?.(plugin ? `${plugin.id}/${plugin.extensionId}` : "", property);
+            };
+          },
+          get sampleTerrainHeight() {
+            return async (lng: number, lat: number) => {
+              const result = await commonReearth?.scene?.sampleTerrainHeight?.(lng, lat);
+              startEventLoop?.();
+              return result;
+            };
+          },
+        }),
+        plugin: {
+          get id() {
+            return plugin?.id;
+          },
+          get extensionType() {
+            return plugin?.extensionType;
+          },
+          get extensionId() {
+            return plugin?.extensionId;
+          },
+          get property() {
+            return plugin?.property;
+          },
+        },
+        plugins: {
+          get postMessage() {
+            const sender =
+              (plugin?.extensionType === "widget"
+                ? widget?.()?.id
+                : plugin?.extensionType === "block"
+                ? block?.()?.id
+                : "") ?? "";
+            return (id: string, msg: any) => pluginPostMessage(id, msg, sender);
+          },
+          get instances() {
+            return commonReearth.plugins.instances;
+          },
+        },
+        clientStorage: {
+          get getAsync() {
+            return (key: string) => {
+              const promise = clientStorage.getAsync(
+                (plugin?.extensionType === "widget"
+                  ? widget?.()?.id
+                  : plugin?.extensionType === "block"
+                  ? block?.()?.id
+                  : "") ?? "",
+                key,
+              );
+              promise.finally(() => {
+                startEventLoop?.();
+              });
+              return promise;
+            };
+          },
+          get setAsync() {
+            return (key: string, value: any) => {
+              const localValue =
+                typeof value === "object" ? JSON.parse(JSON.stringify(value)) : value;
+              const promise = clientStorage.setAsync(
+                (plugin?.extensionType === "widget"
+                  ? widget?.()?.id
+                  : plugin?.extensionType === "block"
+                  ? block?.()?.id
+                  : "") ?? "",
+                key,
+                localValue,
+              );
+              promise.finally(() => {
+                startEventLoop?.();
+              });
+              return promise;
+            };
+          },
+          get deleteAsync() {
+            return (key: string) => {
+              const promise = clientStorage.deleteAsync(
+                (plugin?.extensionType === "widget"
+                  ? widget?.()?.id
+                  : plugin?.extensionType === "block"
+                  ? block?.()?.id
+                  : "") ?? "",
+                key,
+              );
+              promise.finally(() => {
+                startEventLoop?.();
+              });
+              return promise;
+            };
+          },
+          get keysAsync() {
+            return () => {
+              const promise = clientStorage.keysAsync(
+                (plugin?.extensionType === "widget"
+                  ? widget?.()?.id
+                  : plugin?.extensionType === "block"
+                  ? block?.()?.id
+                  : "") ?? "",
+              );
+              promise.finally(() => {
+                startEventLoop?.();
+              });
+              return promise;
+            };
+          },
+        },
+        ...events,
+      },
+      plugin?.extensionType === "block"
+        ? {
+            get layer() {
+              return layer?.();
+            },
+            get block() {
+              return block?.();
+            },
+          }
+        : {},
+      plugin?.extensionType === "widget"
+        ? {
+            get widget() {
+              return {
+                ...widget?.(),
+                moveTo: (options: WidgetLocationOptions) => {
+                  const widgetId = widget?.()?.id;
+                  if (!widgetId) return;
+                  moveWidget?.(widgetId, options);
+                },
+              };
+            },
+          }
+        : {},
+    ),
+  });
+}
+
+export function commonReearth({
+  engineName,
+  events,
+  layersInViewport,
+  layers,
+  sceneProperty,
+  inEditor,
+  built,
+  tags,
+  camera,
+  clock,
+  pluginInstances,
+  viewport,
+  selectedLayer,
+  selectedFeature,
+  layerSelectionReason,
+  selectLayer,
+  showLayer,
+  hideLayer,
+  addLayer,
+  overrideLayerProperty,
+  overrideSceneProperty,
+  flyTo,
+  lookAt,
+  zoomIn,
+  zoomOut,
+  cameraViewport,
+  orbit,
+  rotateRight,
+  captureScreen,
+  getLocationFromScreen,
+  sampleTerrainHeight,
+  enableScreenSpaceCameraController,
+  lookHorizontal,
+  lookVertical,
+  moveForward,
+  moveBackward,
+  moveUp,
+  moveDown,
+  moveLeft,
+  moveRight,
+  moveOverTerrain,
+  flyToGround,
+}: {
+  engineName?: string;
+  events: Events<ReearthEventType>;
+  layers: () => MapRef["layers"] | undefined;
+  sceneProperty: () => any;
+  tags: () => Tag[];
+  viewport: () => GlobalThis["reearth"]["viewport"];
+  camera: () => GlobalThis["reearth"]["camera"]["position"];
+  clock: () => GlobalThis["reearth"]["clock"];
+  pluginInstances: () => PluginInstances;
+  selectedLayer: () => GlobalThis["reearth"]["layers"]["selected"];
+  selectedFeature: () => GlobalThis["reearth"]["layers"]["selectedFeature"];
+  layerSelectionReason: () => GlobalThis["reearth"]["layers"]["selectionReason"];
+  selectLayer: LayersRef["select"];
+  layersInViewport: GlobalThis["reearth"]["layers"]["layersInViewport"];
+  showLayer: GlobalThis["reearth"]["layers"]["show"];
+  hideLayer: GlobalThis["reearth"]["layers"]["hide"];
+  addLayer: GlobalThis["reearth"]["layers"]["add"];
+  overrideLayerProperty: GlobalThis["reearth"]["layers"]["overrideProperty"];
+  overrideSceneProperty: GlobalThis["reearth"]["scene"]["overrideProperty"];
+  flyTo: GlobalThis["reearth"]["camera"]["flyTo"];
+  lookAt: GlobalThis["reearth"]["camera"]["lookAt"];
+  zoomIn: GlobalThis["reearth"]["camera"]["zoomIn"];
+  zoomOut: GlobalThis["reearth"]["camera"]["zoomOut"];
+  rotateRight: GlobalThis["reearth"]["camera"]["rotateRight"];
+  orbit: GlobalThis["reearth"]["camera"]["orbit"];
+  cameraViewport?: () => GlobalThis["reearth"]["camera"]["viewport"];
+  captureScreen: GlobalThis["reearth"]["scene"]["captureScreen"];
+  getLocationFromScreen: GlobalThis["reearth"]["scene"]["getLocationFromScreen"];
+  sampleTerrainHeight: GlobalThis["reearth"]["scene"]["sampleTerrainHeight"];
+  inEditor: () => GlobalThis["reearth"]["scene"]["inEditor"];
+  built: () => GlobalThis["reearth"]["scene"]["built"];
+  enableScreenSpaceCameraController: GlobalThis["reearth"]["camera"]["enableScreenSpaceController"];
+  lookHorizontal: GlobalThis["reearth"]["camera"]["lookHorizontal"];
+  lookVertical: GlobalThis["reearth"]["camera"]["lookVertical"];
+  moveForward: GlobalThis["reearth"]["camera"]["moveForward"];
+  moveBackward: GlobalThis["reearth"]["camera"]["moveBackward"];
+  moveUp: GlobalThis["reearth"]["camera"]["moveUp"];
+  moveDown: GlobalThis["reearth"]["camera"]["moveDown"];
+  moveLeft: GlobalThis["reearth"]["camera"]["moveLeft"];
+  moveRight: GlobalThis["reearth"]["camera"]["moveRight"];
+  moveOverTerrain: GlobalThis["reearth"]["camera"]["moveOverTerrain"];
+  flyToGround: GlobalThis["reearth"]["camera"]["flyToGround"];
+}): CommonReearth {
+  return {
+    version: window.REEARTH_CONFIG?.version || "",
+    apiVersion: 1,
+    visualizer: {
+      engine: engineName,
+      camera: {
+        flyTo,
+        lookAt,
+        zoomIn,
+        zoomOut,
+        rotateRight,
+        orbit,
+        get position() {
+          return camera?.();
+        },
+        get viewport() {
+          return cameraViewport?.();
+        },
+        enableScreenSpaceController: enableScreenSpaceCameraController,
+        lookHorizontal,
+        lookVertical,
+        moveForward,
+        moveBackward,
+        moveUp,
+        moveDown,
+        moveLeft,
+        moveRight,
+        moveOverTerrain,
+        flyToGround,
+      },
+      get property() {
+        return sceneProperty?.();
+      },
+      overrideProperty: overrideSceneProperty,
+    },
+    get clock() {
+      return clock?.();
+    },
+    scene: {
+      get inEditor() {
+        return !!inEditor?.();
+      },
+      get built() {
+        return !!built?.();
+      },
+      get property() {
+        return sceneProperty?.();
+      },
+      overrideProperty: overrideSceneProperty,
+      captureScreen,
+      getLocationFromScreen,
+      sampleTerrainHeight,
+    },
+    get viewport() {
+      return viewport?.();
+    },
+    engineName,
+    camera: {
+      flyTo,
+      lookAt,
+      zoomIn,
+      zoomOut,
+      rotateRight,
+      orbit,
+      get position() {
+        return camera();
+      },
+      get viewport() {
+        return cameraViewport?.();
+      },
+      enableScreenSpaceController: enableScreenSpaceCameraController,
+      lookHorizontal,
+      lookVertical,
+      moveForward,
+      moveBackward,
+      moveUp,
+      moveDown,
+      moveLeft,
+      moveRight,
+      moveOverTerrain,
+      flyToGround,
+    },
+    layers: {
+      get layersInViewport() {
+        return layersInViewport;
+      },
+      get select() {
+        // For compat
+        return (id: string | undefined, reason?: LayerSelectionReason | undefined) =>
+          selectLayer?.(id, id, reason);
+      },
+      get show() {
+        return showLayer;
+      },
+      get hide() {
+        return hideLayer;
+      },
+      // For compat
+      get overriddenProperties() {
+        return layers()
+          ?.overriddenLayers?.()
+          ?.reduce((res, v) => {
+            return {
+              ...res,
+              [v.id]: v.compat?.property,
+            };
+          }, {} as { [id: string]: any });
+      },
+      get overrideProperty() {
+        return overrideLayerProperty;
+      },
+      get isLayer() {
+        return !!layers()?.isLayer;
+      },
+      get layers() {
+        return layers()?.layers() ?? [];
+      },
+      get tags() {
+        return tags();
+      },
+      get selectionReason() {
+        return layerSelectionReason();
+      },
+      get overriddenInfobox() {
+        return layerSelectionReason()?.defaultInfobox;
+      },
+      get defaultInfobox() {
+        return layerSelectionReason()?.defaultInfobox;
+      },
+      get selected() {
+        return selectedLayer();
+      },
+      get selectedFeature() {
+        return selectedFeature();
+      },
+      get findById() {
+        return (id: string) => layers()?.findById(id);
+      },
+      get findByIds() {
+        return (...args: string[]) =>
+          layers()
+            ?.findByIds(...args)
+            ?.filter((l): l is LazyLayer => !!l);
+      },
+      get findByTags() {
+        return (...args: string[]) => layers()?.findByTags(...args);
+      },
+      get findByTagLabels() {
+        return (...args: string[]) => layers()?.findByTagLabels(...args);
+      },
+      get find() {
+        return (cb: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean) =>
+          layers()?.find(cb);
+      },
+      get findAll() {
+        return (cb: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean) =>
+          layers()?.findAll(cb);
+      },
+      get override() {
+        return layers()?.override;
+      },
+      get overridden() {
+        return layers()?.overriddenLayers?.();
+      },
+      get replace() {
+        return layers()?.replace;
+      },
+      get delete() {
+        return layers()?.deleteLayer;
+      },
+      get walk() {
+        return layers()?.walk;
+      },
+      get add() {
+        return addLayer;
+      },
+    },
+    plugins: {
+      get instances() {
+        return pluginInstances().meta.current;
+      },
+    },
+    ...events,
+  };
+}
diff --git a/web/src/beta/core/Crust/Plugins/context.tsx b/web/src/beta/core/Crust/Plugins/context.tsx
new file mode 100644
index 0000000000..d195d38ab5
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/context.tsx
@@ -0,0 +1,18 @@
+import { createContext, FC, PropsWithChildren, useContext } from "react";
+
+import type { Context } from "./types";
+
+const PluginContext = createContext<Context | undefined>(undefined);
+
+export const PluginProvider: FC<PropsWithChildren<{ value: Context }>> = ({ children, value }) => (
+  <PluginContext.Provider value={value}>{children}</PluginContext.Provider>
+);
+
+export const usePluginContext = (): Context => {
+  const ctx = useContext(PluginContext);
+  if (!ctx) {
+    throw new Error("Could not found PluginProvider");
+  }
+
+  return ctx;
+};
diff --git a/web/src/beta/core/Crust/Plugins/hooks.ts b/web/src/beta/core/Crust/Plugins/hooks.ts
new file mode 100644
index 0000000000..7f64acab99
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/hooks.ts
@@ -0,0 +1,468 @@
+import { useCallback, useEffect, useMemo } from "react";
+
+import type { CameraPosition, NaiveLayer } from "@reearth/beta/core/mantle";
+import {
+  type MouseEventHandles,
+  type MouseEvents,
+  events,
+  useGet,
+  CameraOptions,
+  LookAtDestination,
+  FlyToDestination,
+  LayerSelectionReason,
+  TickEventCallback,
+} from "@reearth/beta/core/Map";
+
+import { commonReearth } from "./api";
+import { ReearthEventType, Viewport, ViewportSize } from "./plugin_types";
+import { Context, Props } from "./types";
+import useClientStorage from "./useClientStorage";
+import usePluginInstances from "./usePluginInstances";
+
+export type SelectedReearthEventType = Pick<
+  ReearthEventType,
+  "cameramove" | "select" | "tick" | "resize" | keyof MouseEvents | "layeredit"
+>;
+
+export default function ({
+  engineName,
+  mapRef,
+  sceneProperty,
+  inEditor,
+  built,
+  tags,
+  viewport,
+  selectedLayer,
+  selectedFeature,
+  layerSelectionReason,
+  alignSystem,
+  floatingWidgets,
+  camera,
+  useExperimentalSandbox,
+  overrideSceneProperty,
+  onLayerEdit,
+}: Props) {
+  const [ev, emit] = useMemo(() => events<SelectedReearthEventType>(), []);
+
+  const layersRef = mapRef?.current?.layers;
+  const engineRef = mapRef?.current?.engine;
+
+  const pluginInstances = usePluginInstances({
+    alignSystem,
+    floatingWidgets,
+    blocks: selectedLayer?.layer?.infobox?.blocks,
+  });
+  const clientStorage = useClientStorage();
+
+  const getLayers = useGet(layersRef);
+  const getSceneProperty = useGet(sceneProperty);
+  const getInEditor = useGet(!!inEditor);
+  const getBuilt = useGet(!!built);
+  const getTags = useGet(tags ?? []);
+  const getCamera = useGet(camera);
+  const getClock = useCallback(() => {
+    const clock = engineRef?.getClock();
+    return {
+      startTime: clock?.start,
+      stopTime: clock?.stop,
+      currentTime: clock?.current,
+      playing: clock?.playing,
+      paused: !clock?.playing,
+      speed: clock?.speed,
+      play: engineRef?.play,
+      pause: engineRef?.pause,
+      tick: engineRef?.tick,
+    };
+  }, [engineRef]);
+  const getPluginInstances = useGet(pluginInstances);
+  const getViewport = useGet(viewport as Viewport);
+  const getSelectedLayer = useGet(selectedLayer);
+  const getSelectedFeature = useGet(selectedFeature);
+  const getLayerSelectionReason = useGet(layerSelectionReason);
+  const overrideScenePropertyCommon = useCallback(
+    (property: any) => {
+      return overrideSceneProperty("", property);
+    },
+    [overrideSceneProperty],
+  );
+
+  const flyTo = useCallback(
+    (target: string | FlyToDestination, options?: CameraOptions | undefined) => {
+      engineRef?.flyTo(target, options);
+    },
+    [engineRef],
+  );
+
+  const lookAt = useCallback(
+    (dest: LookAtDestination, options?: CameraOptions) => {
+      engineRef?.lookAt(dest, options);
+    },
+    [engineRef],
+  );
+
+  const cameraViewport = useCallback(() => {
+    return engineRef?.getViewport();
+  }, [engineRef]);
+
+  const layersInViewport = useCallback(() => {
+    return layersRef?.findAll(layer => !!engineRef?.inViewport(layer?.property?.default?.location));
+  }, [engineRef, layersRef]);
+
+  const zoomIn = useCallback(
+    (amount: number) => {
+      engineRef?.zoomIn(amount);
+    },
+    [engineRef],
+  );
+
+  const zoomOut = useCallback(
+    (amount: number) => {
+      engineRef?.zoomOut(amount);
+    },
+    [engineRef],
+  );
+
+  const rotateRight = useCallback(
+    (radian: number) => {
+      engineRef?.rotateRight(radian);
+    },
+    [engineRef],
+  );
+
+  const orbit = useCallback(
+    (radian: number) => {
+      engineRef?.orbit(radian);
+    },
+    [engineRef],
+  );
+
+  const captureScreen = useCallback(
+    (type?: string, encoderOptions?: number) => {
+      return engineRef?.captureScreen(type, encoderOptions);
+    },
+    [engineRef],
+  );
+
+  const getLocationFromScreen = useCallback(
+    (x: number, y: number, withTerrain?: boolean) => {
+      return engineRef?.getLocationFromScreen(x, y, withTerrain);
+    },
+    [engineRef],
+  );
+
+  const sampleTerrainHeight = useCallback(
+    async (lng: number, lat: number) => {
+      return await engineRef?.sampleTerrainHeight(lng, lat);
+    },
+    [engineRef],
+  );
+
+  const enableScreenSpaceCameraController = useCallback(
+    (enabled: boolean) => engineRef?.enableScreenSpaceCameraController(enabled),
+    [engineRef],
+  );
+
+  const lookHorizontal = useCallback(
+    (amount: number) => {
+      engineRef?.lookHorizontal(amount);
+    },
+    [engineRef],
+  );
+
+  const lookVertical = useCallback(
+    (amount: number) => {
+      engineRef?.lookVertical(amount);
+    },
+    [engineRef],
+  );
+
+  const moveForward = useCallback(
+    (amount: number) => {
+      engineRef?.moveForward(amount);
+    },
+    [engineRef],
+  );
+
+  const moveBackward = useCallback(
+    (amount: number) => {
+      engineRef?.moveBackward(amount);
+    },
+    [engineRef],
+  );
+
+  const moveUp = useCallback(
+    (amount: number) => {
+      engineRef?.moveUp(amount);
+    },
+    [engineRef],
+  );
+
+  const moveDown = useCallback(
+    (amount: number) => {
+      engineRef?.moveDown(amount);
+    },
+    [engineRef],
+  );
+
+  const moveLeft = useCallback(
+    (amount: number) => {
+      engineRef?.moveLeft(amount);
+    },
+    [engineRef],
+  );
+
+  const moveRight = useCallback(
+    (amount: number) => {
+      engineRef?.moveRight(amount);
+    },
+    [engineRef],
+  );
+
+  const moveOverTerrain = useCallback(
+    (offset?: number) => {
+      return engineRef?.moveOverTerrain(offset);
+    },
+    [engineRef],
+  );
+
+  const flyToGround = useCallback(
+    (dest: FlyToDestination, options?: CameraOptions, offset?: number) => {
+      engineRef?.flyToGround(dest, options, offset);
+    },
+    [engineRef],
+  );
+
+  const addLayer = useCallback(
+    (layer: NaiveLayer) => {
+      return layersRef?.add(layer)?.id;
+    },
+    [layersRef],
+  );
+
+  const overrideLayerProperty = useCallback(
+    (id: string, property?: Partial<any> | null | undefined) => {
+      layersRef?.override(id, { property });
+    },
+    [layersRef],
+  );
+
+  const selectLayer = useCallback(
+    (
+      layerId: string | undefined,
+      featureId?: string | undefined,
+      reason?: LayerSelectionReason | undefined,
+    ) => {
+      layersRef?.select(layerId, featureId, reason);
+    },
+    [layersRef],
+  );
+
+  const showLayer = useCallback(
+    (...args: string[]) => {
+      layersRef?.show(...args);
+    },
+    [layersRef],
+  );
+
+  const hideLayer = useCallback(
+    (...args: string[]) => {
+      layersRef?.hide(...args);
+    },
+    [layersRef],
+  );
+
+  const value = useMemo<Context>(
+    () => ({
+      reearth: commonReearth({
+        engineName,
+        events: ev,
+        layers: getLayers,
+        sceneProperty: getSceneProperty,
+        inEditor: getInEditor,
+        built: getBuilt,
+        tags: getTags,
+        camera: getCamera,
+        clock: getClock,
+        pluginInstances: getPluginInstances,
+        viewport: getViewport,
+        selectedLayer: getSelectedLayer,
+        selectedFeature: getSelectedFeature,
+        layerSelectionReason: getLayerSelectionReason,
+        showLayer,
+        hideLayer,
+        addLayer,
+        selectLayer,
+        overrideLayerProperty,
+        overrideSceneProperty: overrideScenePropertyCommon,
+        layersInViewport,
+        flyTo,
+        lookAt,
+        zoomIn,
+        zoomOut,
+        cameraViewport,
+        rotateRight,
+        orbit,
+        captureScreen,
+        getLocationFromScreen,
+        sampleTerrainHeight,
+        enableScreenSpaceCameraController,
+        lookHorizontal,
+        lookVertical,
+        moveForward,
+        moveBackward,
+        moveUp,
+        moveDown,
+        moveLeft,
+        moveRight,
+        moveOverTerrain,
+        flyToGround,
+      }),
+      overrideSceneProperty,
+      pluginInstances,
+      clientStorage,
+      useExperimentalSandbox,
+    }),
+    [
+      engineName,
+      ev,
+      getLayers,
+      getSceneProperty,
+      getInEditor,
+      getBuilt,
+      getTags,
+      getCamera,
+      getClock,
+      getPluginInstances,
+      getViewport,
+      getSelectedLayer,
+      getSelectedFeature,
+      getLayerSelectionReason,
+      showLayer,
+      hideLayer,
+      addLayer,
+      selectLayer,
+      overrideLayerProperty,
+      overrideScenePropertyCommon,
+      layersInViewport,
+      flyTo,
+      lookAt,
+      zoomIn,
+      zoomOut,
+      cameraViewport,
+      rotateRight,
+      orbit,
+      captureScreen,
+      getLocationFromScreen,
+      sampleTerrainHeight,
+      enableScreenSpaceCameraController,
+      lookHorizontal,
+      lookVertical,
+      moveForward,
+      moveBackward,
+      moveUp,
+      moveDown,
+      moveLeft,
+      moveRight,
+      moveOverTerrain,
+      flyToGround,
+      overrideSceneProperty,
+      pluginInstances,
+      clientStorage,
+      useExperimentalSandbox,
+    ],
+  );
+
+  useEmit<SelectedReearthEventType>(
+    {
+      select: useMemo<[layerId: string | undefined, featureId: string | undefined]>(
+        () => (selectedLayer ? [selectedLayer.id, selectedFeature?.id] : [undefined, undefined]),
+        [selectedLayer, selectedFeature],
+      ),
+      cameramove: useMemo<[camera: CameraPosition] | undefined>(
+        () => (camera ? [camera] : undefined),
+        [camera],
+      ),
+      resize: useMemo<[viewport: ViewportSize] | undefined>(
+        () => [
+          {
+            width: viewport?.width,
+            height: viewport?.height,
+            isMobile: viewport?.isMobile,
+          } as ViewportSize,
+        ],
+        [viewport?.width, viewport?.height, viewport?.isMobile],
+      ),
+    },
+    emit,
+  );
+
+  const onMouseEvent = useCallback(
+    (eventType: keyof MouseEventHandles, fn: any) => {
+      mapRef?.current?.engine[eventType]?.(fn);
+    },
+    [mapRef],
+  );
+
+  const onTickEvent = useCallback(
+    (fn: TickEventCallback) => {
+      mapRef?.current?.engine.onTick?.(fn);
+    },
+    [mapRef],
+  );
+
+  useEffect(() => {
+    const eventHandles: {
+      [index in keyof MouseEvents]: keyof MouseEventHandles;
+    } = {
+      click: "onClick",
+      doubleclick: "onDoubleClick",
+      mousedown: "onMouseDown",
+      mouseup: "onMouseUp",
+      rightclick: "onRightClick",
+      rightdown: "onRightDown",
+      rightup: "onRightUp",
+      middleclick: "onMiddleClick",
+      middledown: "onMiddleDown",
+      middleup: "onMiddleUp",
+      mousemove: "onMouseMove",
+      mouseenter: "onMouseEnter",
+      mouseleave: "onMouseLeave",
+      wheel: "onWheel",
+    };
+    (Object.keys(eventHandles) as (keyof MouseEvents)[]).forEach((event: keyof MouseEvents) => {
+      onMouseEvent(eventHandles[event], (props: MouseEvent) => {
+        emit(event, props);
+      });
+    });
+    onLayerEdit(e => {
+      emit("layeredit", e);
+    });
+    onTickEvent(e => {
+      emit("tick", e);
+    });
+  }, [emit, onMouseEvent, onLayerEdit, onTickEvent]);
+
+  // expose plugin API for developers
+  useEffect(() => {
+    window.reearth = value.reearth;
+    return () => {
+      delete window.reearth;
+    };
+  }, [value]);
+
+  return value;
+}
+
+export function useEmit<T extends { [K in string]: any[] }>(
+  values: { [K in keyof T]?: T[K] | undefined },
+  emit: (<K extends keyof T>(key: K, ...args: T[K]) => void) | undefined,
+) {
+  for (const k of Object.keys(values)) {
+    const args = values[k];
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+      if (!args) return;
+      emit?.(k, ...args);
+    }, [emit, k, args]);
+  }
+}
diff --git a/web/src/beta/core/Crust/Plugins/index.tsx b/web/src/beta/core/Crust/Plugins/index.tsx
new file mode 100644
index 0000000000..cbb364a14a
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/index.tsx
@@ -0,0 +1,19 @@
+import { PluginProvider } from "./context";
+import useHooks from "./hooks";
+import type { Props } from "./types";
+
+export {
+  default as Plugin,
+  ModalContainer,
+  PopupContainer,
+  type Props as PluginProps,
+  type CommonProps as CommonPluginProps,
+  type PluginModalInfo,
+  type PluginPopupInfo,
+  type ExternalPluginProps,
+} from "./Plugin";
+
+export default function Plugins(props: Props) {
+  const value = useHooks(props);
+  return <PluginProvider value={value}>{props.children}</PluginProvider>;
+}
diff --git a/web/src/beta/core/Crust/Plugins/plugin_types.ts b/web/src/beta/core/Crust/Plugins/plugin_types.ts
new file mode 100644
index 0000000000..3a4eaf1afd
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/plugin_types.ts
@@ -0,0 +1,363 @@
+import type {
+  ComputedLayer,
+  ComputedFeature,
+  LatLngHeight,
+  Rect,
+  CameraPosition,
+  Tag,
+  NaiveLayer,
+  LayerSimple,
+} from "@reearth/beta/core/mantle";
+import type {
+  CameraOptions,
+  FlyToDestination,
+  LayerEditEvent,
+  LayersRef,
+  LookAtDestination,
+  LayerSelectionReason,
+  LazyLayer,
+  DefaultInfobox,
+  OverriddenLayer,
+  Undefinable,
+  WrappedRef,
+} from "@reearth/beta/core/Map";
+
+import { Block } from "../Infobox";
+import { Widget } from "../Widgets";
+
+import { CommonReearth } from "./api";
+import { ClientStorage } from "./useClientStorage";
+
+declare global {
+  interface Window {
+    reearth?: CommonReearth;
+  }
+}
+
+export type GlobalThis = {
+  Cesium?: Cesium;
+  reearth: Reearth;
+  console: {
+    readonly log: (...args: any[]) => void;
+    readonly error: (...args: any[]) => void;
+  };
+};
+
+/** Most of the APIs related to Re:Earth are stored in this object. */
+export type Reearth = {
+  readonly version: string;
+  readonly apiVersion: number;
+  readonly visualizer: Undefinable<Visualizer>; // Compat for engin ref
+  /** Current visualization engine type. Currently only "cesium" is available. */
+  readonly engineName?: string;
+  readonly camera: Undefinable<Camera>;
+  readonly clock?: Clock;
+  readonly ui: UI;
+  readonly modal: Modal;
+  readonly popup: Popup;
+  readonly plugin: Plugin;
+  readonly plugins: Plugins;
+  readonly layers: Undefinable<
+    Omit<
+      WrappedRef<LayersRef>,
+      | "layers"
+      | "isLayer"
+      | "add"
+      | "select"
+      | "addAll"
+      | "deleteLayer"
+      | "selectedLayer"
+      | "selectedFeature"
+      | "overriddenLayers"
+    > & {
+      readonly layersInViewport?: () => LazyLayer[] | undefined;
+      readonly overriddenProperties?: { [id: string]: any };
+      readonly overrideProperty?: (properties: LayerSimple["properties"] | undefined) => void;
+      readonly overridden?: OverriddenLayer[];
+      readonly add?: (layer: NaiveLayer) => string | undefined;
+      readonly delete?: WrappedRef<LayersRef>["deleteLayer"];
+      readonly select?: (
+        layerId: string | undefined,
+        reason?: LayerSelectionReason | undefined,
+      ) => void;
+      selectionReason?: LayerSelectionReason;
+      // For compat
+      overriddenInfobox?: LayerSelectionReason["defaultInfobox"];
+      defaultInfobox?: LayerSelectionReason["defaultInfobox"];
+      tags?: Tag[];
+      layers?: LazyLayer[];
+      isLayer?: boolean;
+      selected?: ComputedLayer;
+      selectedFeature?: ComputedFeature;
+    }
+  >;
+  readonly layer?: LazyLayer;
+  readonly widget?: Widget;
+  readonly block?: Block;
+  readonly scene: Undefinable<Scene>;
+  readonly viewport?: Viewport;
+  readonly clientStorage: ClientStorage;
+  readonly on: <T extends keyof ReearthEventType>(
+    type: T,
+    callback: (...args: ReearthEventType[T]) => void,
+  ) => void;
+  readonly off: <T extends keyof ReearthEventType>(
+    type: T,
+    callback: (...args: ReearthEventType[T]) => void,
+  ) => void;
+  readonly once: <T extends keyof ReearthEventType>(
+    type: T,
+    callback: (...args: ReearthEventType[T]) => void,
+  ) => void;
+};
+
+export type Scene = {
+  readonly inEditor: boolean;
+  readonly built: boolean;
+  readonly property?: any;
+  readonly overrideProperty: (property: any) => void;
+  readonly captureScreen: (type?: string, encoderOptions?: number) => string | undefined;
+  readonly getLocationFromScreen: (
+    x: number,
+    y: number,
+    withTerrain?: boolean,
+  ) => LatLngHeight | undefined;
+  readonly sampleTerrainHeight: (lng: number, lat: number) => Promise<number | undefined>;
+};
+
+export type Camera = {
+  /** Current camera position */
+  readonly position: CameraPosition | undefined;
+  readonly viewport: Rect | undefined;
+  readonly zoomIn: (amount: number, options?: CameraOptions) => void;
+  readonly zoomOut: (amount: number, options?: CameraOptions) => void;
+  /** Moves the camera position to the specified destination. */
+  readonly flyTo: (destination: string | FlyToDestination, options?: CameraOptions) => void;
+  /** Moves the camera position to look at the specified destination. */
+  readonly lookAt: (destination: LookAtDestination, options?: CameraOptions) => void;
+  /** Rotate the camera around the center of earth. */
+  readonly rotateRight: (radian: number) => void;
+  /** Move the angle of camera around the center of earth. */
+  readonly orbit: (radian: number) => void;
+  readonly enableScreenSpaceController: (enabled: boolean) => void;
+  readonly lookHorizontal: (amount: number) => void;
+  readonly lookVertical: (amount: number) => void;
+  readonly moveForward: (amount: number) => void;
+  readonly moveBackward: (amount: number) => void;
+  readonly moveUp: (amount: number) => void;
+  readonly moveDown: (amount: number) => void;
+  readonly moveLeft: (amount: number) => void;
+  readonly moveRight: (amount: number) => void;
+  readonly moveOverTerrain: (offset?: number) => void;
+  readonly flyToGround: (
+    destination: FlyToDestination,
+    options?: CameraOptions,
+    offset?: number,
+  ) => void;
+};
+
+export type Clock = {
+  startTime?: Date;
+  stopTime?: Date;
+  currentTime?: Date;
+  playing?: boolean;
+  paused?: boolean;
+  /** Speed of time. Specifies a multiplier for the speed of time in reality. Default is 1. */
+  speed?: number;
+  readonly tick?: () => Date | void;
+  readonly play?: () => void;
+  readonly pause?: () => void;
+};
+
+export type PluginMessage = {
+  data: any;
+  sender: string;
+};
+
+export type ReearthEventType = {
+  update: [];
+  close: [];
+  cameramove: [camera: CameraPosition];
+  layeredit: [e: LayerEditEvent];
+  select: [layerId: string | undefined, featureId: string | undefined];
+  message: [message: any];
+  click: [props: MouseEvent];
+  doubleclick: [props: MouseEvent];
+  mousedown: [props: MouseEvent];
+  mouseup: [props: MouseEvent];
+  rightclick: [props: MouseEvent];
+  rightdown: [props: MouseEvent];
+  rightup: [props: MouseEvent];
+  middleclick: [props: MouseEvent];
+  middledown: [props: MouseEvent];
+  middleup: [props: MouseEvent];
+  mousemove: [props: MouseEvent];
+  mouseenter: [props: MouseEvent];
+  mouseleave: [props: MouseEvent];
+  wheel: [props: MouseEvent];
+  tick: [props: Date];
+  resize: [props: ViewportSize];
+  modalclose: [];
+  popupclose: [];
+  pluginmessage: [props: PluginMessage];
+};
+
+/** Access to the metadata of this plugin and extension currently executed. */
+export type Plugin = {
+  readonly id: string;
+  readonly extensionId: string;
+  readonly extensionType: string;
+  readonly property?: any;
+};
+
+export type PluginExtensionInstance = {
+  readonly id: string;
+  readonly pluginId: string;
+  readonly name: string;
+  readonly extensionId: string;
+  readonly extensionType: "widget" | "block";
+  readonly runTimes: number | undefined; // Count number of plugin is run
+};
+
+export type Plugins = {
+  readonly instances: PluginExtensionInstance[];
+  readonly postMessage?: (id: string, message: any) => void;
+};
+
+export type SelectLayerOptions = {
+  reason?: string;
+  defaultInfobox?: DefaultInfobox;
+};
+
+/** The API for iframes, which is required not only for displaying the UI but also for calling the browser API. */
+export type UI = {
+  /**
+   * Creates a new iframe to show any UI of the plugin or call the web browser API in a hidden way.
+   *
+   * ```js
+   * reearth.ui.show(`<h1>Hello</h1>`);
+   * ```
+   *
+   * How the UI is displayed depends on the type of extension when visible field is true in the options: in the case of widgets, it will be displayed in the place where it is placed on the screen, in the case of blocks, it will be displayed in the infobox field, but in the case of primitives, it will never actually be displayed.
+   *
+   * The iframe will be automatically resized according to the size of its contents.
+   *
+   * When `show` has been called again druing the iframe has been already shown, the iframe will be destroyed and then a new iframe will be recreated with the new html and options.
+   */
+  readonly show: (
+    html: string,
+    options?: {
+      /** If true, display a iframe. Otherwise, hide the iframe and plugin works like headless mdoe. Default value is true. */
+      visible?: boolean;
+      /** Initial iframe width of the widget. If not specified, the iframe will be automatically resized. If a number is specified, it will be treated as pixels. This option is only available for widgets that are not horizontally extended. */
+      width?: number | string;
+      /** Initial iframe height of the widget. If not specified, the iframe will be automatically resized. If a number is specified, it will be treated as pixels. This option is only available for widgets that are not vertically extended. */
+      height?: number | string;
+      /** Override whether the iframe is extended. This option is only available for widgets on an extendable area on the widget align system. */
+      extended?: boolean;
+    },
+  ) => void;
+  /**
+   * Sends a message to the iframe's window shown by the show method. Sent data will be automatically encoded as JSON and restored in the iframe's window. So any object that cannot be serialized to JSON will be ignored.
+   */
+  readonly postMessage: (message: any) => void;
+  /**
+   * Resize the iframe by the plugin. If width or height is undefined, it will be auto-resized. If a number is specified, it will be treated as pixels.
+   *
+   * If plugins try to resize the iframe by specifying size in the iframe's internal HTML, for example, in the body style, or by updating the CSS, iframe will not actually be resized. In that case, plugins need to call this method explicitly to resize the iframe.
+   */
+  readonly resize: (
+    /** Width of the iframe of the widget. This field is only available for widgets that are not horizontally extended. */
+    width: string | number | undefined,
+    /** Height of the iframe of the widget. This field is only available for widgets that are not vertically extended. */
+    height: string | number | undefined,
+    /** Overrides whether the iframe is extended. This option is only available for widgets on an extendable area on the widget align system. */
+    extended?: boolean | undefined,
+  ) => void;
+  readonly close: () => void;
+};
+
+export type Modal = {
+  readonly show: (
+    html: string,
+    options?: {
+      width?: number | string;
+      height?: number | string;
+      background?: string;
+    },
+  ) => void;
+  readonly postMessage: (message: any) => void;
+  readonly update: (options: {
+    width?: number | string;
+    height?: number | string;
+    background?: string;
+  }) => void;
+  readonly close: () => void;
+};
+
+export type PopupPosition =
+  | "top"
+  | "top-start"
+  | "top-end"
+  | "right"
+  | "right-start"
+  | "right-end"
+  | "bottom"
+  | "bottom-start"
+  | "bottom-end"
+  | "left"
+  | "left-start"
+  | "left-end";
+
+export type PopupOffset =
+  | number
+  | {
+      mainAxis?: number;
+      crossAxis?: number;
+      alignmentAxis?: number | null;
+    };
+
+export type Popup = {
+  readonly show: (
+    html: string,
+    options?: {
+      width?: number | string;
+      height?: number | string;
+      position?: PopupPosition;
+      offset?: PopupOffset;
+    },
+  ) => void;
+  readonly postMessage: (message: any) => void;
+  readonly update: (options: {
+    width?: number | string;
+    height?: number | string;
+    position?: PopupPosition;
+    offset?: PopupOffset;
+  }) => void;
+  readonly close: () => void;
+};
+
+/** Deprecated. */
+export type Visualizer = {
+  /** use `reearth.engine` instead. */
+  readonly engine: string;
+  /** use `reearth.camera` instead. */
+  readonly camera: Camera;
+  /** use `reearth.scene.property` instead. */
+  readonly property?: any;
+  /** use `reearth.scene.overrideProperty` instead. */
+  readonly overrideProperty: (property: any) => void;
+};
+
+export type ViewportSize = {
+  readonly width: number;
+  readonly height: number;
+  readonly isMobile: boolean;
+};
+
+export type Viewport = ViewportSize & {
+  readonly query: Record<string, string>;
+};
+
+/** Cesium API: available only when the plugin is a primitive */
+export type Cesium = {};
diff --git a/web/src/beta/core/Crust/Plugins/storybook.tsx b/web/src/beta/core/Crust/Plugins/storybook.tsx
new file mode 100644
index 0000000000..baa4cc6a13
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/storybook.tsx
@@ -0,0 +1,204 @@
+import { action } from "@storybook/addon-actions";
+import type { ReactNode } from "react";
+
+import { Layer } from "../../mantle";
+
+import { PluginProvider } from "./context";
+import type { Context } from "./types";
+
+const layers: Layer[] = [
+  {
+    id: "a",
+    title: "A",
+    type: "simple",
+    data: {
+      type: "geojson",
+      value: { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] } },
+    },
+    marker: {
+      imageColor: "#fff",
+    },
+    properties: {
+      default: {
+        location: {
+          lat: 10,
+          lng: 10,
+        },
+        height: 10,
+      },
+    },
+  },
+  {
+    id: "b",
+    title: "B",
+    type: "simple",
+    data: {
+      type: "geojson",
+      value: { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] } },
+    },
+    marker: {
+      imageColor: "#fff",
+    },
+    properties: {
+      default: {
+        location: {
+          lat: 20,
+          lng: 20,
+        },
+        height: 20,
+      },
+    },
+  },
+  {
+    id: "c",
+    title: "C",
+    type: "simple",
+    data: {
+      type: "geojson",
+      value: { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] } },
+    },
+    marker: {
+      imageColor: "#fff",
+    },
+    properties: {
+      default: {
+        location: {
+          lat: 30,
+          lng: 30,
+        },
+        height: 30,
+      },
+    },
+  },
+];
+
+export function Provider({ children }: { children?: ReactNode }) {
+  return <PluginProvider value={context}>{children}</PluginProvider>;
+}
+
+export const context: Context = {
+  reearth: {
+    engineName: "cesium",
+    version: "",
+    apiVersion: 0,
+    visualizer: {} as any,
+    plugins: {
+      get instances() {
+        return [];
+      },
+    },
+    scene: {
+      inEditor: false,
+      built: false,
+      overrideProperty: act("overrideSceneProperty"),
+      captureScreen: act("captureScreen"),
+      getLocationFromScreen: act("getLocationFromScreen"),
+      sampleTerrainHeight: act("sampleTerrainHeight"),
+    },
+    layers: {
+      hide: act("layers.hide"),
+      show: act("layers.show"),
+      select: act("layers.select"),
+      add: act("layers.add"),
+      findById: act("layers.findById"),
+      findByIds: act("layers.findByIds"),
+      walk: act("layers.walk"),
+      find: act("layers.find"),
+      override: act("layers.override"),
+      replace: act("layers.replace"),
+      delete: act("layers.delete"),
+      findAll: act("layers.findAll"),
+      findByTags: act("layers.findByTags"),
+      findByTagLabels: act("layers.findByTagLabels"),
+      layersInViewport: act("layersInViewport"),
+      layers,
+    },
+    camera: {
+      position: {
+        lat: 0,
+        lng: 0,
+        height: 0,
+        heading: 0,
+        pitch: 0,
+        roll: 0,
+        fov: Math.PI * (60 / 180),
+      },
+      viewport: { west: 0, east: 0, north: 0, south: 0 },
+      enableScreenSpaceController: act("enableScreenSpaceController"),
+      flyTo: act("flyTo"),
+      lookAt: act("lookAt"),
+      zoomIn: act("zoomIn"),
+      zoomOut: act("zoomOut"),
+      rotateRight: act("rotateRight"),
+      orbit: act("orbit"),
+      lookHorizontal: act("lookHorizontal"),
+      lookVertical: act("lookVertical"),
+      moveForward: act("moveForward"),
+      moveBackward: act("moveBackward"),
+      moveUp: act("moveUp"),
+      moveDown: act("moveDown"),
+      moveLeft: act("moveLeft"),
+      moveRight: act("moveRight"),
+      moveOverTerrain: act("moveOverTerrain"),
+      flyToGround: act("flyToGround"),
+    },
+    clock: {
+      startTime: new Date("2022-06-01"),
+      stopTime: new Date("2022-06-03"),
+      currentTime: new Date("2022-06-02"),
+      playing: false,
+      paused: true,
+      speed: 1,
+      play: () => {},
+      pause: () => {},
+      tick: () => new Date("2022-06-03"),
+    },
+    viewport: {
+      width: 1280,
+      height: 720,
+      isMobile: false,
+      query: {},
+    },
+    on: act("on"),
+    off: act("off"),
+    once: act("once"),
+  },
+  pluginInstances: {
+    meta: {
+      current: [],
+    },
+    postMessage: () => {},
+    addPluginMessageSender: () => {},
+    removePluginMessageSender: () => {},
+    runTimesCache: {
+      get: () => 1,
+      increment: () => {},
+      decrement: () => {},
+      clear: () => {},
+      clearAll: () => {},
+    },
+  },
+  clientStorage: {
+    getAsync: act("clientStorage.getAsync"),
+    setAsync: act("clientStorage.setAsync"),
+    deleteAsync: act("clientStorage.deleteAsync"),
+    keysAsync: act("clientStorage.keysAsync"),
+    dropStore: () => {
+      return new Promise<void>(resolve => {
+        resolve();
+      });
+    },
+  },
+  overrideSceneProperty: act("overrideSceneProperty"),
+};
+
+function act<T extends any[], M extends (...args: T) => any>(
+  name: string,
+  mock?: M,
+): (...args: T) => ReturnType<M> {
+  const a = action(`Common API: ${name}`);
+  return (...args) => {
+    a(...args);
+    return mock?.(...args);
+  };
+}
diff --git a/web/src/beta/core/Crust/Plugins/types.ts b/web/src/beta/core/Crust/Plugins/types.ts
new file mode 100644
index 0000000000..5c2f670772
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/types.ts
@@ -0,0 +1,40 @@
+import type { PropsWithChildren, RefObject } from "react";
+
+import type { Camera, ComputedFeature, SelectedFeatureInfo, Tag } from "@reearth/beta/core/mantle";
+import type { ComputedLayer, LayerEditEvent, LayerSelectionReason } from "@reearth/beta/core/Map";
+import type { Viewport } from "@reearth/beta/core/Visualizer";
+
+import type { MapRef } from "../types";
+import type { InternalWidget, WidgetAlignSystem } from "../Widgets";
+
+import type { CommonReearth } from "./api";
+import type { ClientStorage } from "./useClientStorage";
+import type { PluginInstances } from "./usePluginInstances";
+
+export type Props = PropsWithChildren<{
+  engineName?: string;
+  mapRef?: RefObject<MapRef>;
+  sceneProperty?: any;
+  inEditor?: boolean;
+  built?: boolean;
+  tags?: Tag[];
+  selectedLayer?: ComputedLayer;
+  selectedFeature?: ComputedFeature;
+  selectedFeatureInfo?: SelectedFeatureInfo;
+  layerSelectionReason?: LayerSelectionReason;
+  viewport?: Viewport;
+  alignSystem?: WidgetAlignSystem;
+  floatingWidgets?: InternalWidget[];
+  useExperimentalSandbox?: boolean;
+  overrideSceneProperty: (id: string, property: any) => void;
+  camera?: Camera;
+  onLayerEdit: (cb: (e: LayerEditEvent) => void) => void;
+}>;
+
+export type Context = {
+  reearth: CommonReearth;
+  pluginInstances: PluginInstances;
+  clientStorage: ClientStorage;
+  useExperimentalSandbox?: boolean;
+  overrideSceneProperty: (id: string, property: any) => void;
+};
diff --git a/web/src/beta/core/Crust/Plugins/useClientStorage.ts b/web/src/beta/core/Crust/Plugins/useClientStorage.ts
new file mode 100644
index 0000000000..319686579f
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/useClientStorage.ts
@@ -0,0 +1,134 @@
+import localforage from "localforage";
+import { useRef, useMemo, useCallback } from "react";
+
+export type ClientStorage = {
+  getAsync: (extensionInstanceId: string, key: string) => Promise<any>;
+  setAsync: (extensionInstanceId: string, key: string, value: any) => Promise<void>;
+  deleteAsync: (extensionInstanceId: string, key: string) => Promise<void>;
+  keysAsync: (extensionInstanceId: string) => Promise<string[]>;
+  dropStore: (extensionInstanceId: string) => Promise<void>;
+};
+
+export default () => {
+  const clientStores = useRef<Map<string, LocalForage>>(new Map());
+
+  const getStore = useCallback((extensionInstanceId: string) => {
+    if (!extensionInstanceId) return false;
+    const storeName = extensionInstanceId.startsWith("reearth-plugineditor")
+      ? extensionInstanceId
+      : `reearth-plugin-${extensionInstanceId}`;
+    let store = clientStores.current.get(storeName);
+    if (!store) {
+      store = localforage.createInstance({
+        name: storeName,
+      });
+      clientStores.current.set(storeName, store);
+    }
+    return store;
+  }, []);
+
+  const clientStorage = useMemo(() => {
+    return {
+      getAsync: (extensionInstanceId: string, key: string) => {
+        return new Promise<any>((resolve, reject) => {
+          const store = getStore(extensionInstanceId);
+          if (!store) {
+            reject();
+          } else {
+            store
+              .getItem(key)
+              .then((value: any) => {
+                resolve(value);
+              })
+              .catch((err: any) => {
+                console.log(
+                  `err get client storage value for ${extensionInstanceId} ${key}: ${err}`,
+                );
+                reject();
+              });
+          }
+        });
+      },
+      setAsync: (extensionInstanceId: string, key: string, value: any) => {
+        return new Promise<void>((resolve, reject) => {
+          const store = getStore(extensionInstanceId);
+          if (!store) {
+            reject();
+          } else {
+            store
+              .setItem(key, value)
+              .then(() => {
+                resolve();
+              })
+              .catch((err: any) => {
+                console.log(
+                  `err set client storage value for ${extensionInstanceId} ${key} ${value}: ${err}`,
+                );
+                reject();
+              });
+          }
+        });
+      },
+      deleteAsync: (extensionInstanceId: string, key: string) => {
+        return new Promise<void>((resolve, reject) => {
+          const store = getStore(extensionInstanceId);
+          if (!store) {
+            reject();
+          } else {
+            store
+              .removeItem(key)
+              .then(() => {
+                resolve();
+              })
+              .catch((err: any) => {
+                console.log(
+                  `err delete client storage value for ${extensionInstanceId} ${key}: ${err}`,
+                );
+                reject();
+              });
+          }
+        });
+      },
+      keysAsync: (extensionInstanceId: string) => {
+        return new Promise<string[]>((resolve, reject) => {
+          const store = getStore(extensionInstanceId);
+          if (!store) {
+            reject();
+          } else {
+            store
+              .keys()
+              .then((value: string[]) => {
+                resolve(value);
+              })
+              .catch((err: any) => {
+                console.log(`err get client storage keys for ${extensionInstanceId}: ${err}`);
+                reject();
+              });
+          }
+        });
+      },
+      // Currently not in use.
+      dropStore: (extensionInstanceId: string) => {
+        return new Promise<void>((resolve, reject) => {
+          const store = getStore(extensionInstanceId);
+          if (!store) {
+            reject();
+          } else {
+            store
+              .dropInstance()
+              .then(() => resolve())
+              .catch((err: any) => {
+                console.log(`err drop client storage for ${extensionInstanceId}: ${err}`);
+                reject();
+              })
+              .finally(() => {
+                clientStores.current.delete(extensionInstanceId);
+              });
+          }
+        });
+      },
+    };
+  }, [getStore]);
+
+  return clientStorage;
+};
diff --git a/web/src/beta/core/Crust/Plugins/useExperimentalSandbox.ts b/web/src/beta/core/Crust/Plugins/useExperimentalSandbox.ts
new file mode 100644
index 0000000000..e91eae4369
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/useExperimentalSandbox.ts
@@ -0,0 +1,6 @@
+import { usePluginContext } from "./context";
+
+export default (): boolean => {
+  const ctx = usePluginContext();
+  return !!ctx.useExperimentalSandbox;
+};
diff --git a/web/src/beta/core/Crust/Plugins/usePluginInstances.ts b/web/src/beta/core/Crust/Plugins/usePluginInstances.ts
new file mode 100644
index 0000000000..61bfbae77e
--- /dev/null
+++ b/web/src/beta/core/Crust/Plugins/usePluginInstances.ts
@@ -0,0 +1,150 @@
+import { useEffect, useRef, useMemo, type MutableRefObject } from "react";
+
+import type { Block } from "../Infobox";
+import type { WidgetAlignSystem } from "../Widgets";
+import type { InternalWidget, WidgetSection, WidgetZone } from "../Widgets/WidgetAlignSystem";
+
+import type { PluginExtensionInstance } from "./plugin_types";
+
+export type Props = {
+  alignSystem?: WidgetAlignSystem;
+  floatingWidgets?: InternalWidget[];
+  blocks?: Block[];
+};
+
+export type PluginInstances = {
+  meta: MutableRefObject<PluginExtensionInstance[]>;
+  postMessage: (id: string, msg: any, sender: string) => void;
+  addPluginMessageSender: (id: string, msgSender: (msg: string) => void) => void;
+  removePluginMessageSender: (id: string) => void;
+  runTimesCache: {
+    get: (id: string) => number | undefined;
+    increment: (id: string) => void;
+    decrement: (id: string) => void;
+    clear: (id: string) => void;
+    clearAll: () => void;
+  };
+};
+
+export default ({ alignSystem, floatingWidgets, blocks }: Props) => {
+  const pluginInstancesMeta = useRef<PluginExtensionInstance[]>([]);
+
+  const runTimesCache = useMemo<Map<string, number>>(() => new Map(), []);
+  const runTimesCacheHandler = useMemo(
+    () => ({
+      get: (id: string) => runTimesCache.get(id) || 0,
+      increment: (id: string) => runTimesCache.set(id, runTimesCacheHandler.get(id) + 1),
+      decrement: (id: string) => runTimesCache.set(id, runTimesCacheHandler.get(id) - 1),
+      clear: (id: string) => runTimesCache.set(id, 0),
+      clearAll: () => runTimesCache.clear(),
+    }),
+    [runTimesCache],
+  );
+
+  useEffect(() => {
+    const instances: PluginExtensionInstance[] = [];
+
+    if (alignSystem) {
+      Object.keys(alignSystem).forEach(zoneName => {
+        const zone = alignSystem[zoneName as keyof WidgetAlignSystem];
+        if (zone) {
+          Object.keys(zone).forEach(sectionName => {
+            const section = zone[sectionName as keyof WidgetZone];
+            if (section) {
+              Object.keys(section).forEach(areaName => {
+                const area = section[areaName as keyof WidgetSection];
+                if (area?.widgets) {
+                  area?.widgets.forEach(widget => {
+                    instances.push({
+                      id: widget.id,
+                      pluginId: widget.pluginId ?? "",
+                      name: getExtensionInstanceName(widget.pluginId ?? ""),
+                      extensionId: widget.extensionId ?? "",
+                      extensionType: "widget",
+                      get runTimes() {
+                        return runTimesCacheHandler.get(widget.id);
+                      },
+                    });
+                  });
+                }
+              });
+            }
+          });
+        }
+      });
+    }
+
+    if (floatingWidgets) {
+      floatingWidgets.forEach(widget => {
+        instances.push({
+          id: widget.id,
+          pluginId: widget.pluginId ?? "",
+          name: getExtensionInstanceName(widget.pluginId ?? ""),
+          extensionId: widget.extensionId ?? "",
+          extensionType: "widget",
+          get runTimes() {
+            return runTimesCacheHandler.get(widget.id);
+          },
+        });
+      });
+    }
+
+    if (blocks) {
+      blocks.forEach(block => {
+        instances.push({
+          id: block.id,
+          pluginId: block.pluginId ?? "",
+          name: getExtensionInstanceName(block.pluginId ?? ""),
+          extensionId: block.extensionId ?? "",
+          extensionType: "block",
+          get runTimes() {
+            return runTimesCacheHandler.get(block.id);
+          },
+        });
+      });
+    }
+
+    pluginInstancesMeta.current = instances;
+  }, [alignSystem, floatingWidgets, blocks, runTimesCacheHandler]);
+
+  const pluginMessageSenders = useRef<Map<string, (msg: any) => void>>(new Map());
+
+  const pluginInstances = useMemo(() => {
+    return {
+      meta: pluginInstancesMeta,
+      postMessage: (id: string, msg: any, sender: string) => {
+        const msgSender = pluginMessageSenders.current?.get(id);
+        if (!msgSender) return;
+        new Promise<void>((resolve, reject) => {
+          try {
+            msgSender({ data: msg, sender });
+            resolve();
+          } catch (err) {
+            reject(err);
+          }
+        }).catch(err => {
+          console.error(`plugin postMessage error (${sender} -> ${id})`, err);
+        });
+      },
+      addPluginMessageSender: (id: string, msgSender: (msg: string) => void) => {
+        pluginMessageSenders.current?.set(id, msgSender);
+      },
+      removePluginMessageSender: (id: string) => {
+        pluginMessageSenders.current?.delete(id);
+      },
+      runTimesCache: runTimesCacheHandler,
+    };
+  }, [pluginInstancesMeta, runTimesCacheHandler]);
+
+  return pluginInstances;
+};
+
+function getExtensionInstanceName(pluginId: string) {
+  const segments = pluginId.split("~");
+  if (segments.length === 3) {
+    return segments[1];
+  } else if (segments.length === 2) {
+    return segments[0];
+  }
+  return pluginId;
+}
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Button/MenuButton.tsx b/web/src/beta/core/Crust/Widgets/Widget/Button/MenuButton.tsx
new file mode 100644
index 0000000000..6f15ca40e4
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Button/MenuButton.tsx
@@ -0,0 +1,235 @@
+import { useRef, useCallback, useState } from "react";
+import { usePopper } from "react-popper";
+
+import Flex from "@reearth/beta/components/Flex";
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import { styled, metricsSizes, mask } from "@reearth/services/theme";
+
+import type { Camera, FlyToDestination, Theme } from "../types";
+import { Visible } from "../useVisible";
+
+export type Button = {
+  id: string;
+  buttonType?: "menu" | "link" | "camera";
+  buttonTitle?: string;
+  buttonStyle?: "text" | "icon" | "texticon";
+  buttonIcon?: string;
+  buttonLink?: string;
+  buttonColor?: string;
+  buttonBgcolor?: string;
+  buttonCamera?: Camera;
+  visible: Visible;
+};
+
+export type MenuItem = {
+  id: string;
+  menuTitle?: string;
+  menuIcon?: string;
+  menuType?: "link" | "camera" | "border";
+  menuLink?: string;
+  menuCamera?: Camera;
+};
+
+export type Props = {
+  button?: Button;
+  menuItems?: MenuItem[];
+  location?: {
+    section?: "left" | "right" | "center";
+    area?: "top" | "middle" | "bottom";
+  };
+  align?: "end" | "start" | "centered";
+  theme?: Theme;
+  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
+};
+
+export default function MenuButton({
+  button: b,
+  menuItems,
+  location,
+  align,
+  theme,
+  onFlyTo,
+}: Props): JSX.Element {
+  const [visibleMenuButton, setVisibleMenuButton] = useState(false);
+
+  const referenceElement = useRef<HTMLDivElement>(null);
+  const popperElement = useRef<HTMLDivElement>(null);
+  const { styles, attributes } = usePopper(referenceElement.current, popperElement.current, {
+    placement:
+      location?.area === "bottom"
+        ? location?.section === "left" || (location?.section === "center" && align !== "end")
+          ? "top-start"
+          : "top-end"
+        : location?.area === "middle"
+        ? location?.section === "left"
+          ? align === "end"
+            ? "top-start"
+            : "bottom-start"
+          : align === "end"
+          ? "top-end"
+          : "bottom-end"
+        : location?.section === "right" || align === "end"
+        ? "bottom-end"
+        : "bottom-start",
+    modifiers: [
+      {
+        name: "eventListeners",
+        enabled: !visibleMenuButton,
+        options: {
+          scroll: false,
+          resize: false,
+        },
+      },
+      {
+        name: "offset",
+        options: {
+          offset: [0, 2],
+        },
+      },
+    ],
+  });
+
+  const handleClick = useCallback(
+    (b: Button | MenuItem) => () => {
+      const t = "buttonType" in b ? b.buttonType : "menuType" in b ? b.menuType : undefined;
+      if (t === "menu") {
+        setVisibleMenuButton(!visibleMenuButton);
+        return;
+      } else if (t === "camera") {
+        const camera =
+          "buttonCamera" in b ? b.buttonCamera : "menuCamera" in b ? b.menuCamera : undefined;
+        if (camera) {
+          onFlyTo?.(camera, { duration: 2 });
+        }
+      } else {
+        let link = "buttonLink" in b ? b.buttonLink : "menuLink" in b ? b.menuLink : undefined;
+        if (link) {
+          const splitLink = link?.split("/");
+          if (splitLink?.[0] !== "http:" && splitLink?.[0] !== "https:") {
+            link = "https://" + link;
+          }
+          window.open(link, "_blank", "noopener");
+        }
+      }
+      setVisibleMenuButton(false);
+    },
+    [onFlyTo, visibleMenuButton],
+  );
+
+  return (
+    <Wrapper publishedTheme={theme} button={b}>
+      <Button
+        publishedTheme={theme}
+        button={b}
+        onClick={b && handleClick(b)}
+        ref={referenceElement}>
+        {(b?.buttonStyle === "icon" || b?.buttonStyle === "texticon") && b?.buttonIcon && (
+          <Icon icon={b?.buttonIcon} size={20} />
+        )}
+        {b?.buttonStyle !== "icon" && (
+          <Text
+            size="xs"
+            customColor
+            otherProperties={{
+              marginLeft: b?.buttonIcon && b?.buttonStyle === "texticon" ? "5px" : undefined,
+            }}>
+            {b?.buttonTitle}
+          </Text>
+        )}
+      </Button>
+      <MenuWrapper ref={popperElement} style={{ ...styles.popper }} {...attributes.popper}>
+        {visibleMenuButton && (
+          <MenuInnerWrapper publishedTheme={theme} button={b}>
+            {menuItems?.map(i => (
+              <MenuItem
+                align="center"
+                publishedTheme={theme}
+                key={i.id}
+                item={i}
+                button={b}
+                onClick={handleClick(i)}>
+                <Flex align="center">
+                  {i.menuIcon && <Icon icon={i.menuIcon} size={20} />}
+                  <Text
+                    size="xs"
+                    customColor
+                    otherProperties={{
+                      marginLeft: i.menuIcon ? "5px" : undefined,
+                    }}>
+                    {i.menuTitle}
+                  </Text>
+                </Flex>
+              </MenuItem>
+            ))}
+          </MenuInnerWrapper>
+        )}
+      </MenuWrapper>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div<{ button?: Button; publishedTheme?: Theme }>`
+  border-radius: ${metricsSizes["xs"]}px;
+  &,
+  > div {
+    background-color: ${({ button, publishedTheme }) => button?.buttonBgcolor || publishedTheme};
+  }
+`;
+
+const Button = styled.div<{ button?: Button; publishedTheme?: Theme }>`
+  display: flex;
+  border-radius: ${metricsSizes["xs"]}px;
+  min-width: 35px;
+  height: 35px;
+  padding: 0 10px;
+  line-height: 35px;
+  box-sizing: border-box;
+  color: ${({ button, publishedTheme }) => button?.buttonColor || publishedTheme?.mainText};
+  cursor: pointer;
+  align-items: center;
+  user-select: none;
+
+  &:hover {
+    background: ${({ publishedTheme, button }) =>
+      mask(button?.buttonBgcolor) || publishedTheme?.mask};
+  }
+`;
+
+const MenuWrapper = styled.div`
+  z-index: ${({ theme }) => theme.zIndexes.dropDown};
+  border-radius: 3px;
+  max-height: 30vh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+`;
+
+const MenuInnerWrapper = styled.div<{ button?: Button; publishedTheme?: Theme }>`
+  min-width: 35px;
+  width: 100%;
+  color: ${({ button, publishedTheme }) => button?.buttonColor || publishedTheme?.mainText};
+  white-space: nowrap;
+`;
+
+const MenuItem = styled(Flex)<{
+  item?: MenuItem;
+  button?: Button;
+  publishedTheme?: Theme;
+}>`
+  min-height: ${({ item }) => (item?.menuType === "border" ? null : "25px")};
+  border-radius: ${({ item }) => (item?.menuType === "border" ? null : "3px")};
+  padding: ${({ item }) => (item?.menuType === "border" ? "0 10px" : "2px 10px")};
+  cursor: ${({ item }) => (item?.menuType === "border" ? null : "pointer")};
+  background: ${({ publishedTheme, item, button }) =>
+    item?.menuType === "border" ? mask(button?.buttonBgcolor) || publishedTheme?.mask : null};
+  border-bottom: ${({ item, publishedTheme, button }) =>
+    item?.menuType === "border"
+      ? `1px solid ${button?.buttonColor || publishedTheme?.weakText}`
+      : null};
+  user-select: none;
+
+  &:hover {
+    background: ${({ publishedTheme, item, button }) =>
+      item?.menuType === "border" ? null : mask(button?.buttonBgcolor) || publishedTheme?.mask};
+  }
+`;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Button/index.stories.tsx b/web/src/beta/core/Crust/Widgets/Widget/Button/index.stories.tsx
new file mode 100644
index 0000000000..f0ea972007
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Button/index.stories.tsx
@@ -0,0 +1,50 @@
+import { Meta, Story } from "@storybook/react";
+import { Math as CesiumMath } from "cesium";
+
+import { contextEvents } from "../storybook";
+
+import Button, { Props } from ".";
+
+export default {
+  component: Button,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => <Button {...args} />;
+
+Default.args = {
+  widget: {
+    id: "",
+    property: {
+      menu: [
+        {
+          id: "hoge",
+          menuTitle: "Hoge",
+          menuType: "camera",
+          menuCamera: {
+            lat: 0,
+            lng: 0,
+            height: 1000,
+            fov: CesiumMath.toRadians(60),
+            heading: 0,
+            pitch: 0,
+            roll: 0,
+          },
+        },
+        {
+          id: "hoge",
+          menuType: "border",
+        },
+        {
+          id: "GitHub",
+          menuType: "link",
+          menuTitle: "GitHub",
+          menuLink: "https://github.com",
+        },
+      ],
+    },
+  },
+  context: { ...contextEvents },
+  isBuilt: false,
+  isEditable: false,
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Button/index.tsx b/web/src/beta/core/Crust/Widgets/Widget/Button/index.tsx
new file mode 100644
index 0000000000..55a93d0e24
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Button/index.tsx
@@ -0,0 +1,49 @@
+import { styled } from "@reearth/services/theme";
+
+import type { ComponentProps as WidgetProps } from "..";
+import { useVisible } from "../useVisible";
+
+import MenuButton, { Button as ButtonType, MenuItem as MenuItemType } from "./MenuButton";
+
+export type Props = WidgetProps<Property>;
+export type Button = ButtonType;
+export type MenuItem = MenuItemType;
+export type Property = {
+  default?: Button;
+  menu?: MenuItem[];
+};
+
+const Menu = ({
+  widget,
+  theme,
+  isMobile,
+  onVisibilityChange,
+  context: { onFlyTo } = {},
+}: Props): JSX.Element | null => {
+  const { default: button, menu: menuItems } = widget.property ?? {};
+  const visible = useVisible({
+    widgetId: widget.id,
+    visible: widget.property?.default?.visible,
+    isMobile,
+    onVisibilityChange,
+  });
+
+  return visible ? (
+    <Wrapper>
+      <MenuButton
+        theme={theme}
+        button={button}
+        location={widget.layout?.location}
+        align={widget.layout?.align}
+        menuItems={menuItems}
+        onFlyTo={onFlyTo}
+      />
+    </Wrapper>
+  ) : null;
+};
+
+const Wrapper = styled.div`
+  display: flex;
+`;
+
+export default Menu;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/LegacyMenu/MenuButton.tsx b/web/src/beta/core/Crust/Widgets/Widget/LegacyMenu/MenuButton.tsx
new file mode 100644
index 0000000000..86f9fb6cb2
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/LegacyMenu/MenuButton.tsx
@@ -0,0 +1,209 @@
+import { ScreenSpaceEventType } from "cesium";
+import { useRef, useCallback, useState } from "react";
+import { usePopper } from "react-popper";
+import { useClickAway } from "react-use";
+import { ScreenSpaceEvent, ScreenSpaceEventHandler } from "resium";
+
+import Icon from "@reearth/beta/components/Icon";
+import { Camera } from "@reearth/beta/utils/value";
+import { fonts, styled } from "@reearth/services/theme";
+
+import type { FlyToDestination, Theme } from "../types";
+
+export type Position = "topleft" | "topright" | "bottomleft" | "bottomright";
+
+export type Button = {
+  id: string;
+  buttonInvisible?: boolean;
+  buttonType?: "menu" | "link" | "camera";
+  buttonTitle?: string;
+  buttonPosition?: Position;
+  buttonStyle?: "text" | "icon" | "texticon";
+  buttonIcon?: string;
+  buttonLink?: string;
+  buttonColor?: string;
+  buttonBgcolor?: string;
+  buttonCamera?: Camera;
+};
+
+export type MenuItem = {
+  id: string;
+  menuTitle?: string;
+  menuIcon?: string;
+  menuType?: "link" | "camera" | "border";
+  menuLink?: string;
+  menuCamera?: Camera;
+};
+
+export type Props = {
+  button: Button;
+  menuItems?: MenuItem[];
+  pos: Position;
+  theme?: Theme;
+  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
+};
+
+export default function MenuButton({
+  button: b,
+  menuItems,
+  pos,
+  theme,
+  onFlyTo: flyTo,
+}: Props): JSX.Element {
+  const [visibleMenuButton, setVisibleMenuButton] = useState<string>();
+
+  const referenceElement = useRef<HTMLDivElement>(null);
+  const popperElement = useRef<HTMLDivElement>(null);
+  const { styles, attributes } = usePopper(referenceElement.current, popperElement.current, {
+    placement:
+      pos === "topleft"
+        ? "bottom-start"
+        : pos === "topright"
+        ? "bottom-end"
+        : pos === "bottomleft"
+        ? "top-start"
+        : "top-end",
+    strategy: "fixed",
+    modifiers: [
+      {
+        name: "eventListeners",
+        enabled: !visibleMenuButton,
+        options: {
+          scroll: false,
+          resize: false,
+        },
+      },
+    ],
+  });
+
+  const handleClick = useCallback(
+    (b: Button | MenuItem) => () => {
+      const t = "buttonType" in b ? b.buttonType : "menuType" in b ? b.menuType : undefined;
+      if (t === "menu") {
+        setVisibleMenuButton(v => (v === b.id ? undefined : b.id));
+        return;
+      }
+      setVisibleMenuButton(undefined);
+
+      if (t === "camera") {
+        const camera =
+          "buttonCamera" in b ? b.buttonCamera : "menuCamera" in b ? b.menuCamera : undefined;
+        if (camera) {
+          flyTo?.(camera, { duration: 2 });
+        }
+        return;
+      }
+
+      let link = "buttonLink" in b ? b.buttonLink : "menuLink" in b ? b.menuLink : undefined;
+      if (!link) return;
+
+      const splitLink = link?.split("/");
+      if (splitLink?.[0] !== "http:" && splitLink?.[0] !== "https:") {
+        link = "https://" + link;
+      }
+      window.open(link, "_blank", "noopener");
+    },
+    [flyTo],
+  );
+
+  const wrappperRef = useRef<HTMLDivElement>(null);
+  useClickAway(wrappperRef, () => setVisibleMenuButton(undefined));
+
+  return (
+    <Wrapper ref={wrappperRef}>
+      <ScreenSpaceEventHandler>
+        <ScreenSpaceEvent
+          type={ScreenSpaceEventType.LEFT_CLICK}
+          action={() => setVisibleMenuButton(undefined)}
+        />
+      </ScreenSpaceEventHandler>
+      <Button
+        publishedTheme={theme}
+        tabIndex={0}
+        button={b}
+        onClick={handleClick(b)}
+        ref={referenceElement}>
+        {(b.buttonStyle === "icon" || b.buttonStyle === "texticon") && b.buttonIcon && (
+          <StyledIcon icon={b.buttonIcon} size={25} margin={!!b.buttonTitle} />
+        )}
+        {b.buttonStyle !== "icon" && b.buttonTitle}
+      </Button>
+      <div
+        ref={popperElement}
+        style={{
+          minWidth: "200px",
+          width: "100%",
+          position: "absolute",
+          display: visibleMenuButton ? styles.popper.display : "none",
+        }}
+        {...attributes}>
+        {visibleMenuButton && (
+          <MenuWrapper background={theme?.background}>
+            {menuItems?.map(i => (
+              <MenuItem
+                color={theme?.mainText}
+                tabIndex={0}
+                key={i.id}
+                item={i}
+                onClick={handleClick(i)}>
+                {i.menuType !== "border" && i.menuTitle}
+              </MenuItem>
+            ))}
+          </MenuWrapper>
+        )}
+      </div>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  position: relative;
+  padding: 2.5px;
+  &:first-of-type {
+    margin-left: 0;
+  }
+`;
+
+const StyledIcon = styled(Icon)<{ margin: boolean }>`
+  vertical-align: middle;
+  margin-right: ${({ margin }) => (margin ? "5px" : null)};
+`;
+
+const MenuWrapper = styled.div<{ background?: string }>`
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background-color: ${({ background }) => background};
+  border-radius: 3px;
+  overflow-wrap: break-word;
+  hyphens: auto;
+`;
+
+const MenuItem = styled.a<{ item?: MenuItem; color?: string }>`
+  display: block;
+  font-size: ${fonts.sizes.xs}px;
+  margin: ${({ item }) => (item?.menuType === "border" ? "0 5px" : null)};
+  padding: ${({ item }) => (item?.menuType === "border" ? null : "5px 20px")};
+  cursor: ${({ item }) => (item?.menuType === "border" ? null : "pointer")};
+  border-top: ${({ item }) => (item?.menuType === "border" ? "1px solid #fff" : null)};
+  opacity: ${({ item }) => (item?.menuType === "border" ? "0.5" : null)};
+  color: ${({ color }) => color};
+`;
+
+const Button = styled.div<{ button?: Button; publishedTheme?: Theme }>`
+  display: flex;
+  border-radius: 3px;
+  min-width: 32px;
+  height: 32px;
+  padding: 0 10px;
+  font-size: ${fonts.sizes["2xs"]}px;
+  line-height: 32px;
+  box-sizing: border-box;
+  background-color: ${({ button, publishedTheme }) =>
+    button?.buttonBgcolor || publishedTheme?.background};
+  color: ${({ button, publishedTheme }) => button?.buttonColor || publishedTheme?.mainText};
+  cursor: pointer;
+  align-items: center;
+  user-select: none;
+`;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/LegacyMenu/index.stories.tsx b/web/src/beta/core/Crust/Widgets/Widget/LegacyMenu/index.stories.tsx
new file mode 100644
index 0000000000..083302fc7b
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/LegacyMenu/index.stories.tsx
@@ -0,0 +1,107 @@
+import { Meta, Story } from "@storybook/react";
+import { Math as CesiumMath } from "cesium";
+
+import { contextEvents } from "../storybook";
+
+import Menu, { Props } from ".";
+
+export default {
+  component: Menu,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => <Menu {...args} />;
+
+Default.args = {
+  widget: {
+    id: "",
+    property: {
+      buttons: [
+        {
+          id: "menu",
+          buttonType: "menu",
+          buttonTitle: "Menu",
+          buttonPosition: "topleft",
+          buttonStyle: "text",
+        },
+        {
+          id: "google",
+          buttonType: "link",
+          buttonLink: "https://google.com",
+          buttonTitle: "Google",
+          buttonPosition: "topleft",
+          buttonStyle: "text",
+          buttonBgcolor: "red",
+        },
+        {
+          id: "twitter",
+          buttonType: "link",
+          buttonLink: "https://twitter.com",
+          buttonTitle: "Twitter",
+          buttonPosition: "bottomright",
+          buttonStyle: "text",
+          buttonBgcolor: "#0ff",
+        },
+        {
+          id: "hoge",
+          buttonType: "camera",
+          buttonPosition: "bottomright",
+          buttonCamera: {
+            lat: 0,
+            lng: 0,
+            height: 1000,
+            fov: CesiumMath.toRadians(60),
+            heading: 0,
+            pitch: 0,
+            roll: 0,
+          },
+          buttonTitle: "hoge",
+        },
+        {
+          id: "menu2",
+          buttonType: "menu",
+          buttonIcon: "/sample.svg",
+          buttonPosition: "bottomleft",
+          buttonStyle: "icon",
+        },
+        {
+          id: "menu3",
+          buttonType: "menu",
+          buttonTitle: "Menu",
+          buttonIcon: "/sample.svg",
+          buttonPosition: "bottomleft",
+          buttonStyle: "texticon",
+        },
+      ],
+      menu: [
+        {
+          id: "hoge",
+          menuTitle: "Hoge",
+          menuType: "camera",
+          menuCamera: {
+            lat: 0,
+            lng: 0,
+            height: 1000,
+            fov: CesiumMath.toRadians(60),
+            heading: 0,
+            pitch: 0,
+            roll: 0,
+          },
+        },
+        {
+          id: "hoge",
+          menuType: "border",
+        },
+        {
+          id: "GitHub",
+          menuType: "link",
+          menuTitle: "GitHub",
+          menuLink: "https://github.com",
+        },
+      ],
+    },
+  },
+  context: { ...contextEvents },
+  isBuilt: false,
+  isEditable: false,
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/LegacyMenu/index.tsx b/web/src/beta/core/Crust/Widgets/Widget/LegacyMenu/index.tsx
new file mode 100644
index 0000000000..54edc8e206
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/LegacyMenu/index.tsx
@@ -0,0 +1,66 @@
+import { groupBy } from "lodash-es";
+import { useMemo } from "react";
+
+import Flex from "@reearth/beta/components/Flex";
+import { styled } from "@reearth/services/theme";
+
+import type { ComponentProps as WidgetProps } from "..";
+
+import MenuButton, {
+  Button as ButtonType,
+  Position as PositionType,
+  MenuItem as MenuItemType,
+} from "./MenuButton";
+
+export type Props = WidgetProps<Property>;
+export type Position = PositionType;
+export type Button = ButtonType;
+export type MenuItem = MenuItemType;
+export type Property = {
+  buttons?: Button[];
+  menu?: MenuItem[];
+};
+
+const Menu = ({ widget, theme, context: { onFlyTo } = {} }: Props): JSX.Element => {
+  const { buttons, menu: menuItems } = (widget?.property as Property | undefined) ?? {};
+  const buttonsByPosition = useMemo(
+    () => groupBy(buttons, v => v.buttonPosition || "topleft"),
+    [buttons],
+  );
+
+  return (
+    <>
+      {Object.entries(buttonsByPosition).map(([p, buttons]) =>
+        buttons?.length ? (
+          <Wrapper key={p} position={p as Position} wrap="wrap">
+            {buttons.map(b =>
+              !b.buttonInvisible ? (
+                <MenuButton
+                  key={b.id}
+                  button={b}
+                  pos={p as Position}
+                  menuItems={menuItems}
+                  theme={theme}
+                  onFlyTo={onFlyTo}
+                />
+              ) : null,
+            )}
+          </Wrapper>
+        ) : null,
+      )}
+    </>
+  );
+};
+
+const Wrapper = styled(Flex)<{ position?: "topleft" | "topright" | "bottomleft" | "bottomright" }>`
+  position: absolute;
+  max-width: 100vw;
+  padding: 2.5px;
+  top: ${({ position }) => (position === "topleft" || position === "topright" ? "0" : null)};
+  bottom: ${({ position }) =>
+    position === "bottomleft" || position === "bottomright" ? "0" : null};
+  left: ${({ position }) => (position === "topleft" || position === "bottomleft" ? "0" : null)};
+  right: ${({ position }) => (position === "topright" || position === "bottomright" ? "0" : null)};
+`;
+
+export default Menu;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/hooks.ts b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/hooks.ts
new file mode 100644
index 0000000000..a262d5bcc6
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/hooks.ts
@@ -0,0 +1,179 @@
+import { MouseEventHandler, useCallback, useEffect, useRef, useState } from "react";
+
+import { calculateDegreeOfCompass } from "./utils";
+
+const useReferredValue = <T = unknown>(val: T) => {
+  const valRef = useRef(val);
+
+  useEffect(() => {
+    valRef.current = val;
+  }, [val]);
+
+  return valRef;
+};
+
+export const useNavigator = ({
+  degree,
+  onRotate,
+  onMoveOrbit,
+  onStartOrbit,
+  onEndOrbit,
+}: {
+  degree: number;
+  onRotate?: (degree: number) => void;
+  onMoveOrbit?: (degree: number) => void;
+  onStartOrbit?: () => void;
+  onEndOrbit?: () => void;
+}) => {
+  const [compassDegree, setCompassDegree] = useState(0);
+  const [compassFocusDegree, setCompassFocusDegree] = useState(0);
+  const compassRef = useRef<HTMLDivElement | null>(null);
+  const isRotatingRef = useRef(false);
+  const shouldIncrementCompassDegreeOnMovingAngle = useRef(false);
+  const [isMovingAngle, setIsMovingAngle] = useState(false);
+  const isMovingAngleRef = useReferredValue(isMovingAngle);
+  const onRotateRef = useReferredValue(onRotate);
+  const onMoveOrbitRef = useReferredValue(onMoveOrbit);
+  const onStartOrbitRef = useReferredValue(onStartOrbit);
+  const onEndOrbitRef = useReferredValue(onEndOrbit);
+
+  const handleOnMouseDownCompass: MouseEventHandler<HTMLDivElement> = useCallback(
+    e => {
+      const compass = compassRef.current;
+      if (!compass) {
+        return;
+      }
+      const rect = compass.getBoundingClientRect();
+      const degree = calculateDegreeOfCompass(
+        {
+          x: rect.x,
+          y: rect.y,
+          height: compass.clientHeight,
+          width: compass.clientWidth,
+        },
+        { x: e.clientX, y: e.clientY },
+      );
+      isRotatingRef.current = true;
+      setCompassDegree(degree);
+      onRotateRef.current?.(degree);
+    },
+    [onRotateRef],
+  );
+
+  const rotateCompassWhileMovingAngle = useCallback(() => {
+    if (!isMovingAngleRef.current) {
+      return;
+    }
+    setCompassDegree(prevDegree => {
+      const next = shouldIncrementCompassDegreeOnMovingAngle.current
+        ? prevDegree + 1
+        : prevDegree - 1;
+      return next;
+    });
+    window.requestAnimationFrame(rotateCompassWhileMovingAngle);
+  }, [isMovingAngleRef]);
+
+  const handleOnMouseDownAngle: MouseEventHandler<HTMLDivElement> = useCallback(
+    e => {
+      const compass = compassRef.current;
+      if (!compass) {
+        return;
+      }
+      const rect = compass.getBoundingClientRect();
+      const degree = calculateDegreeOfCompass(
+        {
+          x: rect.x,
+          y: rect.y,
+          height: compass.clientHeight,
+          width: compass.clientWidth,
+        },
+        { x: e.clientX, y: e.clientY },
+      );
+      setIsMovingAngle(true);
+      isMovingAngleRef.current = true;
+      setCompassFocusDegree(degree);
+      onStartOrbitRef.current?.();
+      onMoveOrbitRef.current?.(degree);
+
+      rotateCompassWhileMovingAngle();
+    },
+    [rotateCompassWhileMovingAngle, onMoveOrbitRef, isMovingAngleRef, onStartOrbitRef],
+  );
+
+  useEffect(() => {
+    const handleOnMouseMoveCompass = (e: MouseEvent) => {
+      const compass = compassRef.current;
+      if (!isRotatingRef.current || !compass) {
+        return;
+      }
+      const rect = compass.getBoundingClientRect();
+      const degree = calculateDegreeOfCompass(
+        {
+          x: rect.x,
+          y: rect.y,
+          height: compass.clientHeight,
+          width: compass.clientWidth,
+        },
+        { x: e.clientX, y: e.clientY },
+      );
+      setCompassDegree(degree);
+      onRotateRef.current?.(degree);
+    };
+
+    const handleOnMouseMoveAngle = (e: MouseEvent) => {
+      const compass = compassRef.current;
+      if (!isMovingAngleRef.current || !compass) {
+        return;
+      }
+      const rect = compass.getBoundingClientRect();
+      const degree = calculateDegreeOfCompass(
+        {
+          x: rect.x,
+          y: rect.y,
+          height: compass.clientHeight,
+          width: compass.clientWidth,
+        },
+        { x: e.clientX, y: e.clientY },
+      );
+      setCompassFocusDegree(degree);
+      onMoveOrbitRef.current?.(degree);
+
+      shouldIncrementCompassDegreeOnMovingAngle.current = 0 <= degree && degree <= 180;
+    };
+    const handleOnMouseUp = () => {
+      isRotatingRef.current = false;
+      onEndOrbitRef.current?.();
+      setIsMovingAngle(false);
+    };
+    window.addEventListener("mousemove", handleOnMouseMoveCompass);
+    window.addEventListener("mousemove", handleOnMouseMoveAngle);
+    window.addEventListener("mouseup", handleOnMouseUp);
+    return () => {
+      window.addEventListener("mousemove", handleOnMouseMoveCompass);
+      window.addEventListener("mousemove", handleOnMouseMoveAngle);
+      window.addEventListener("mouseup", handleOnMouseUp);
+    };
+  }, [
+    isMovingAngleRef,
+    isRotatingRef,
+    onStartOrbitRef,
+    onEndOrbitRef,
+    onMoveOrbitRef,
+    onRotateRef,
+  ]);
+
+  useEffect(() => {
+    if (!isRotatingRef.current && !isMovingAngleRef.current) {
+      setCompassDegree(degree);
+    }
+  }, [degree, isMovingAngleRef]);
+
+  return {
+    compassRef,
+    compassDegree,
+    compassFocusDegree,
+    isMovingAngle,
+    handleOnMouseDownCompass,
+    handleOnMouseDownAngle,
+  };
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.stories.tsx b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.stories.tsx
new file mode 100644
index 0000000000..754b5a41eb
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.stories.tsx
@@ -0,0 +1,10 @@
+import { Meta, Story } from "@storybook/react";
+
+import Navigator, { Props } from ".";
+
+export default {
+  component: Navigator,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Normal: Story<Props> = ({ ...args }) => <Navigator {...args} degree={0} />;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.test.tsx b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.test.tsx
new file mode 100644
index 0000000000..7318fc65f5
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.test.tsx
@@ -0,0 +1,102 @@
+import { expect, test, vitest } from "vitest";
+
+import { fireEvent, render, screen } from "@reearth/test/utils";
+
+import Navigator from ".";
+
+test("it should rotate compass when degree props is changed", async () => {
+  const { rerender } = render(<Navigator degree={0} />);
+
+  const compass = screen.getByLabelText("compass");
+
+  if (!compass.parentElement) {
+    throw new Error("compass.parentElement should be exist");
+  }
+
+  expect(compass).toHaveStyle({ transform: "rotate(0deg)" });
+
+  rerender(<Navigator degree={30} />);
+  expect(compass).toHaveStyle({ transform: "rotate(30deg)" });
+
+  rerender(<Navigator degree={260} />);
+  expect(compass).toHaveStyle({ transform: "rotate(260deg)" });
+});
+
+test("it should rotate compass by mouse operation", async () => {
+  const onRotateMock = vitest.fn();
+  render(<Navigator degree={0} onRotate={onRotateMock} />);
+
+  const compass = screen.getByLabelText("compass");
+
+  if (!compass.parentElement) {
+    throw new Error("compass.parentElement should be exist");
+  }
+
+  expect(compass).toHaveStyle({ transform: "rotate(0deg)" });
+
+  fireEvent.mouseDown(compass.parentElement);
+  expect(compass).toHaveStyle({ transform: "rotate(90deg)" });
+  expect(onRotateMock).toBeCalledWith(90);
+
+  onRotateMock.mockReset();
+
+  fireEvent.mouseMove(window);
+  expect(compass).toHaveStyle({ transform: "rotate(90deg)" });
+  expect(onRotateMock).toBeCalledWith(90);
+
+  onRotateMock.mockReset();
+
+  fireEvent.mouseUp(window);
+  fireEvent.mouseMove(window);
+  expect(onRotateMock).not.toBeCalled();
+});
+
+test("it should orbit by mouse operation", async () => {
+  const onMoveOrbitMock = vitest.fn();
+  const onStartOrbitMock = vitest.fn();
+  const onEndOrbitMock = vitest.fn();
+  const onRotateMock = vitest.fn();
+  render(
+    <Navigator
+      degree={0}
+      onRotate={onRotateMock}
+      onStartOrbit={onStartOrbitMock}
+      onEndOrbit={onEndOrbitMock}
+      onMoveOrbit={onMoveOrbitMock}
+    />,
+  );
+
+  const angle = screen.getByLabelText("adjust angle");
+  if (!angle.parentElement) {
+    throw new Error("angle.parentElement should be exist");
+  }
+
+  expect(screen.queryByTestId("compassFocus")).toBeNull();
+
+  fireEvent.mouseDown(angle.parentElement);
+
+  const compassFocus = screen.queryByTestId("compassFocus");
+  expect(compassFocus).toBeInTheDocument();
+
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  expect(compassFocus).toHaveStyle({ transform: "rotate(90deg)" });
+  expect(onStartOrbitMock).toBeCalled();
+  expect(onMoveOrbitMock).toBeCalledWith(90);
+
+  onMoveOrbitMock.mockReset();
+
+  fireEvent.mouseMove(window);
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  expect(compassFocus).toHaveStyle({ transform: "rotate(90deg)" });
+  expect(onMoveOrbitMock).toBeCalledWith(90);
+
+  fireEvent.mouseMove(window, { clientX: -10, clientY: -10 });
+
+  onMoveOrbitMock.mockReset();
+
+  fireEvent.mouseUp(window);
+  expect(onEndOrbitMock).toBeCalled();
+
+  fireEvent.mouseMove(window);
+  expect(onMoveOrbitMock).not.toBeCalled();
+});
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.tsx b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.tsx
new file mode 100644
index 0000000000..08c614d758
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/index.tsx
@@ -0,0 +1,199 @@
+import { memo } from "react";
+
+import Icon from "@reearth/beta/components/Icon";
+import { useT } from "@reearth/services/i18n";
+import { styled } from "@reearth/services/theme";
+
+import type { Theme } from "../../types";
+
+import { useNavigator } from "./hooks";
+
+export { degreeToRadian, radianToDegree } from "./utils";
+
+export type Props = {
+  theme?: Theme;
+  degree: number;
+  editing?: boolean;
+  /**
+   * Pass degree of circle as callback arguments.
+   * This event is invoked when mouse down on outer circle and mouse move.
+   * When mouse up, this event is stopped.
+   */
+  onRotate?: (degree: number) => void;
+  /**
+   * Pass distance of movement as x,y axis(px) and degree of circle as callback arguments.
+   * This event is invoked when inner mouse down on circle button and mouse move.
+   * When mouse up, this event is stopped.
+   */
+  onMoveOrbit?: (degree: number) => void;
+  onStartOrbit?: () => void;
+  onEndOrbit?: () => void;
+  /**
+   * This event is invoked when center of circle is clicked.
+   */
+  onRestoreRotate?: () => void;
+  /**
+   * Pass + or -  as callback arguments.
+   */
+  onClickHelp?: () => void;
+  onZoomIn?: () => void;
+  onZoomOut?: () => void;
+};
+
+const NavigatorPresenter: React.FC<Props> = memo(function NavigatorPresenterMemo({
+  theme,
+  degree,
+  editing,
+  onRotate,
+  onStartOrbit,
+  onEndOrbit,
+  onMoveOrbit,
+  onRestoreRotate,
+  onClickHelp,
+  onZoomIn,
+  onZoomOut,
+}) {
+  const t = useT();
+
+  const {
+    compassRef,
+    compassDegree,
+    compassFocusDegree,
+    isMovingAngle,
+    handleOnMouseDownAngle,
+    handleOnMouseDownCompass,
+  } = useNavigator({ degree, onRotate, onStartOrbit, onEndOrbit, onMoveOrbit });
+
+  return (
+    <Container>
+      <CompassContainer>
+        <Compass ref={compassRef} editing={!!editing}>
+          <CompassIcon onMouseDown={handleOnMouseDownCompass} publishedTheme={theme}>
+            <Icon
+              icon="compass"
+              aria-label={t("aria-label-compass")}
+              size={64}
+              style={{ transform: `rotate(${compassDegree}deg)` }}
+            />
+          </CompassIcon>
+          {isMovingAngle && (
+            <CompassFocusIcon
+              style={{
+                transform: `rotate(${compassFocusDegree}deg)`,
+              }}
+              data-testid="compassFocus">
+              <Icon icon="compassFocus" color={theme?.select} alt="" size={30} />
+            </CompassFocusIcon>
+          )}
+          <AngleIcon
+            onMouseDown={handleOnMouseDownAngle}
+            publishedTheme={theme}
+            editing={!!editing}>
+            <Icon icon="navigatorAngle" aria-label={t("aria-label-adjust-angle")} size={32} />
+          </AngleIcon>
+        </Compass>
+        {onClickHelp && <Help onClick={onClickHelp}>?</Help>}
+      </CompassContainer>
+      <Tool publishedTheme={theme}>
+        <ToolIconButton onClick={onZoomIn} publishedTheme={theme}>
+          <Icon icon="plus" aria-label={t("aria-label-zoom-in")} size={16} />
+        </ToolIconButton>
+        <ToolIconButton onClick={onRestoreRotate} publishedTheme={theme}>
+          <Icon icon="house" aria-label={t("aria-label-Go-to-the-home-position")} size={16} />
+        </ToolIconButton>
+        <ToolIconButton onClick={onZoomOut} publishedTheme={theme}>
+          <Icon icon="minus" aria-label={t("aria-label-zoom-out")} size={16} />
+        </ToolIconButton>
+      </Tool>
+    </Container>
+  );
+});
+
+const Container = styled.div`
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const CompassContainer = styled.div`
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+`;
+
+const Help = styled.button`
+  position: absolute;
+  height: 32px;
+  width: 32px;
+  border-radius: 16px 0 0 16px;
+  left: -28px;
+  background: #4a4a4a;
+  color: #fff;
+  user-select: none;
+`;
+
+const Compass = styled.div<{ editing: boolean }>`
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  width: 64px;
+  height: 64px;
+  cursor: pointer;
+  ${({ editing }) => (!editing ? "z-index: 1;" : "")}
+`;
+
+const CompassIcon = styled.div<{ publishedTheme?: Theme }>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 64px;
+  height: 64px;
+  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  & path {
+    fill: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  }
+  & circle {
+    stroke: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.main.deepBg};
+  }
+`;
+
+const CompassFocusIcon = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0.8;
+  width: 64px;
+  height: 64px;
+`;
+
+const AngleIcon = styled.div<{ publishedTheme?: Theme; editing: boolean }>`
+  & circle {
+    fill: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.main.deepBg};
+  }
+  & g {
+    stroke: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  }
+  display: inline-block;
+  height: 32px;
+  width: 32px;
+  ${({ editing }) => (!editing ? "z-index: 1;" : "")}
+`;
+
+const Tool = styled.div<{ publishedTheme?: Theme }>`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background: ${({ theme, publishedTheme }) => publishedTheme?.background || theme.main.deepBg};
+  border-radius: 16px;
+  margin-top: 8px;
+`;
+
+const ToolIconButton = styled.button<{ publishedTheme?: Theme }>`
+  color: ${({ theme, publishedTheme }) => publishedTheme?.mainText || theme.main.text};
+  height: 32px;
+  width: 32px;
+  display: grid;
+  place-items: center;
+`;
+
+export default NavigatorPresenter;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/types.ts b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/types.ts
new file mode 100644
index 0000000000..2d1e0ef9c9
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/types.ts
@@ -0,0 +1,5 @@
+export type CompassAngle = {
+  x: number;
+  y: number;
+  degree: number;
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/utils.test.ts b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/utils.test.ts
new file mode 100644
index 0000000000..14585809b9
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/utils.test.ts
@@ -0,0 +1,32 @@
+import { test, expect } from "vitest";
+
+import { calculateDegreeOfCompass } from "./utils";
+
+const compassPosition = {
+  x: 0,
+  y: 0,
+  height: 50,
+  width: 50,
+};
+
+test("it should be 0˚ when x axis is half of width and y axis is 0", () => {
+  expect(calculateDegreeOfCompass(compassPosition, { x: compassPosition.width / 2, y: 0 })).toBe(0);
+});
+
+test("it should be 90˚ when x axis equals to width and y axis half of height", () => {
+  expect(
+    calculateDegreeOfCompass(compassPosition, {
+      x: compassPosition.width,
+      y: compassPosition.height / 2,
+    }),
+  ).toBe(90);
+});
+
+test("it should be -90˚ when x axis is 0 and y axis half of height", () => {
+  expect(
+    calculateDegreeOfCompass(compassPosition, {
+      x: 0,
+      y: compassPosition.height / 2,
+    }),
+  ).toBe(270);
+});
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/utils.ts b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/utils.ts
new file mode 100644
index 0000000000..b140ef7d54
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Navigator/NavigatorPresenter/utils.ts
@@ -0,0 +1,27 @@
+export const degreeToRadian = (deg: number) => deg * (Math.PI / 180);
+export const radianToDegree = (rad: number) => rad * (180 / Math.PI);
+
+export const calculateDegreeOfCompass = (
+  compass: {
+    x: number;
+    y: number;
+    height: number;
+    width: number;
+  },
+  currentPosition: { x: number; y: number },
+) => {
+  const compassCenterPos = {
+    x: compass.x + compass.width / 2,
+    y: compass.y + compass.height / 2,
+  };
+
+  // It assumes that compassCenterPos is center, calculate x,y axis
+  const x = currentPosition.x - compassCenterPos.x;
+  const y = currentPosition.y - compassCenterPos.y;
+
+  // Calculate degree of x,y axis
+  // `Math.atan2` return radian but this is hard to handle it.
+  // So we transform radian to degree the following mathematical formula.
+  // `degree = radian * (180˚ / π)`
+  return radianToDegree(Math.atan2(y, x)) + 90;
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Navigator/hooks.ts b/web/src/beta/core/Crust/Widgets/Widget/Navigator/hooks.ts
new file mode 100644
index 0000000000..dfa84f756c
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Navigator/hooks.ts
@@ -0,0 +1,116 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+
+import type { Camera, FlyToDestination, Widget } from "../types";
+import { useVisible } from "../useVisible";
+
+import { degreeToRadian, radianToDegree } from "./NavigatorPresenter";
+
+export default function ({
+  camera,
+  initialCamera,
+  widget,
+  isMobile,
+  onZoomIn,
+  onZoomOut,
+  onCameraOrbit,
+  onCameraRotateRight,
+  onFlyTo,
+  onVisibilityChange,
+}: {
+  camera?: Camera;
+  initialCamera?: Camera;
+  widget: Widget;
+  isMobile?: boolean;
+  onZoomIn?: (amount: number) => void;
+  onZoomOut?: (amount: number) => void;
+  onCameraOrbit?: (orbit: number) => void;
+  onCameraRotateRight?: (radian: number) => void;
+  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
+  onVisibilityChange?: (id: string, visible: boolean) => void;
+}) {
+  const [degree, setDegree] = useState(0);
+  const [isHelpOpened, setIsHelpOpened] = useState(false);
+  const orbitRadianRef = useRef(0);
+  const isMovingOrbit = useRef(false);
+  const visible = useVisible({
+    widgetId: widget.id,
+    visible: widget.property?.default?.visible,
+    isMobile,
+    onVisibilityChange,
+  });
+
+  const handleOnRotate = useCallback(
+    (deg: number) => {
+      const radian = degreeToRadian(deg);
+      onCameraRotateRight?.(radian);
+    },
+    [onCameraRotateRight],
+  );
+  const handleOnStartOrbit = useCallback(() => {
+    isMovingOrbit.current = true;
+  }, []);
+  const handleOnEndOrbit = useCallback(() => {
+    isMovingOrbit.current = false;
+  }, []);
+  const handleOnMoveOrbit = useCallback((deg: number) => {
+    orbitRadianRef.current = degreeToRadian(deg);
+  }, []);
+  const handleOnRestoreRotate = useCallback(() => {
+    if (initialCamera) {
+      onFlyTo?.(initialCamera, { duration: 1 });
+    }
+  }, [initialCamera, onFlyTo]);
+  const handleOnClickHelp = useCallback(() => {
+    setIsHelpOpened(prev => !prev);
+  }, []);
+
+  const handleOnZoomIn = useCallback(() => {
+    onZoomIn?.(2);
+  }, [onZoomIn]);
+  const handleOnZoomOut = useCallback(() => {
+    onZoomOut?.(2);
+  }, [onZoomOut]);
+
+  const cameraHeading = camera?.heading;
+  // Sync cesium camera.
+  useEffect(() => {
+    if (!cameraHeading) {
+      return;
+    }
+    setDegree(360 - radianToDegree(cameraHeading));
+  }, [cameraHeading]);
+
+  useEffect(() => {
+    if (!onCameraOrbit) return;
+
+    let a = 0;
+    const handleTick = () => {
+      a = window.requestAnimationFrame(() => {
+        handleTick();
+        if (!isMovingOrbit.current) {
+          return;
+        }
+        onCameraOrbit?.(orbitRadianRef.current);
+      });
+    };
+    handleTick();
+
+    return () => window.cancelAnimationFrame(a);
+  }, [onCameraOrbit]);
+
+  return {
+    degree,
+    isHelpOpened,
+    visible,
+    events: {
+      onRotate: handleOnRotate,
+      onStartOrbit: handleOnStartOrbit,
+      onEndOrbit: handleOnEndOrbit,
+      onMoveOrbit: handleOnMoveOrbit,
+      onRestoreRotate: handleOnRestoreRotate,
+      onHelp: handleOnClickHelp,
+      onZoomIn: handleOnZoomIn,
+      onZoomOut: handleOnZoomOut,
+    },
+  };
+}
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Navigator/index.stories.tsx b/web/src/beta/core/Crust/Widgets/Widget/Navigator/index.stories.tsx
new file mode 100644
index 0000000000..fd506996ab
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Navigator/index.stories.tsx
@@ -0,0 +1,17 @@
+import { Meta, Story } from "@storybook/react";
+
+import { contextEvents } from "../storybook";
+
+import Component, { Props } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  context: { ...contextEvents },
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Navigator/index.tsx b/web/src/beta/core/Crust/Widgets/Widget/Navigator/index.tsx
new file mode 100644
index 0000000000..6807f2724d
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Navigator/index.tsx
@@ -0,0 +1,49 @@
+import type { ComponentProps as WidgetProps } from "..";
+import { Visible } from "../useVisible";
+
+import useHooks from "./hooks";
+import NavigatorPresenter from "./NavigatorPresenter";
+
+export type Props = WidgetProps<Property>;
+
+export type Property = {
+  default: {
+    visible: Visible;
+  };
+};
+
+const Navigator = ({
+  theme,
+  editing,
+  widget,
+  isMobile,
+  onVisibilityChange,
+  context: {
+    camera,
+    initialCamera,
+    onCameraOrbit,
+    onCameraRotateRight,
+    onFlyTo,
+    onZoomIn,
+    onZoomOut,
+  } = {},
+}: Props): JSX.Element | null => {
+  const { degree, visible, events } = useHooks({
+    camera,
+    initialCamera,
+    widget,
+    isMobile,
+    onCameraOrbit,
+    onCameraRotateRight,
+    onFlyTo,
+    onZoomIn,
+    onZoomOut,
+    onVisibilityChange,
+  });
+
+  return visible ? (
+    <NavigatorPresenter theme={theme} degree={degree} editing={!!editing} {...events} />
+  ) : null;
+};
+
+export default Navigator;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/SplashScreen/index.stories.tsx b/web/src/beta/core/Crust/Widgets/Widget/SplashScreen/index.stories.tsx
new file mode 100644
index 0000000000..05c0c7cd31
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/SplashScreen/index.stories.tsx
@@ -0,0 +1,62 @@
+import { Meta, Story } from "@storybook/react";
+import { Math as CesiumMath } from "cesium";
+
+import { contextEvents } from "../storybook";
+
+import SplashScreen, { Props } from ".";
+
+export default {
+  component: SplashScreen,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => <SplashScreen {...args} />;
+
+Default.args = {
+  widget: {
+    id: "",
+    property: {
+      overlay: {
+        overlayEnabled: true,
+        overlayDuration: 2,
+        overlayTransitionDuration: 1,
+        overlayDelay: 0.5,
+        overlayImage: `/sample.svg`,
+        overlayImageW: 648,
+        overlayImageH: 432,
+        overlayBgcolor: "#fff8",
+      },
+      camera: [
+        {
+          cameraPosition: {
+            lat: 0,
+            lng: 0,
+            height: 1000,
+            fov: CesiumMath.toRadians(60),
+            heading: 0,
+            pitch: 0,
+            roll: 0,
+          },
+          cameraDelay: 3,
+          cameraDuration: 3,
+        },
+        {
+          cameraPosition: {
+            lat: 0,
+            lng: 0,
+            height: 1000,
+            fov: CesiumMath.toRadians(60),
+            heading: 90,
+            pitch: 0,
+            roll: 0,
+          },
+          cameraDelay: 3,
+          cameraDuration: 3,
+        },
+      ],
+    },
+  },
+  context: { ...contextEvents },
+  isBuilt: true,
+  isEditable: false,
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/SplashScreen/index.tsx b/web/src/beta/core/Crust/Widgets/Widget/SplashScreen/index.tsx
new file mode 100644
index 0000000000..aef99bd656
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/SplashScreen/index.tsx
@@ -0,0 +1,138 @@
+import { useTransition, TransitionStatus } from "@rot1024/use-transition";
+import { useState, useEffect } from "react";
+import { useTimeoutFn } from "react-use";
+
+import { styled } from "@reearth/services/theme";
+
+import type { ComponentProps as WidgetProps } from "..";
+import type { Camera } from "../types";
+import { useVisible, Visible } from "../useVisible";
+
+export type Props = WidgetProps<Property>;
+
+export type Property = {
+  overlay: {
+    overlayEnabled?: boolean;
+    overlayDelay?: number;
+    overlayDuration?: number;
+    overlayTransitionDuration?: number;
+    overlayBgcolor?: string;
+    overlayImage?: string;
+    overlayImageW?: number;
+    overlayImageH?: number;
+    overlayTitle?: string;
+    visible?: Visible;
+  };
+  camera?: {
+    cameraPosition?: Camera;
+    cameraDuration?: number;
+    cameraDelay?: number;
+  }[];
+};
+
+const SplashScreen = ({
+  widget,
+  inEditor,
+  isMobile,
+  onVisibilityChange,
+  context: { onFlyTo } = {},
+}: Props): JSX.Element | null => {
+  const { property } = widget ?? {};
+  const {
+    overlayEnabled: enabled,
+    overlayDelay: delay = 0,
+    overlayDuration: duration = 3,
+    overlayTransitionDuration: transitionDuration = 1,
+    overlayBgcolor: bgcolor,
+    overlayImage: image,
+    overlayImageW: imageW,
+    overlayImageH: imageH,
+    overlayTitle: title,
+  } = property?.overlay ?? {};
+  const camera = property?.camera?.filter(c => !!c.cameraPosition);
+  const visible = useVisible({
+    widgetId: widget.id,
+    visible: widget.property?.overlay.visible,
+    isMobile,
+    onVisibilityChange,
+  });
+
+  const [cameraSequence, setCameraSequence] = useState(0);
+  const [delayedCameraSequence, setDelayedCameraSequence] = useState(-1);
+  const currentCamera = camera?.[cameraSequence];
+  const delayedCurrentCamera = camera?.[delayedCameraSequence];
+
+  useEffect(() => {
+    if (!onFlyTo) return;
+    const { cameraPosition, cameraDuration, cameraDelay } = delayedCurrentCamera ?? {};
+    if (!cameraPosition) return;
+    const to = window.setTimeout(() => {
+      onFlyTo(cameraPosition, {
+        duration: cameraDuration ?? 0,
+      });
+    }, (cameraDelay ?? 0) * 1000);
+    return () => clearTimeout(to);
+  }, [delayedCurrentCamera, onFlyTo]);
+
+  const [isActive, setActive] = useState(false);
+  const state = useTransition(isActive, transitionDuration * 1000, {
+    mountOnEnter: true,
+    unmountOnExit: true,
+  });
+
+  useTimeoutFn(() => {
+    if (!inEditor && enabled) {
+      setActive(true);
+    }
+  }, delay * 1000);
+
+  useTimeoutFn(() => {
+    setActive(false);
+  }, (delay + transitionDuration + duration) * 1000);
+
+  useEffect(() => {
+    if (inEditor || !currentCamera) return;
+    const t = setTimeout(() => {
+      setDelayedCameraSequence(i => i + 1);
+    }, (currentCamera?.cameraDelay ?? 0) * 1000);
+    return () => clearTimeout(t);
+  }, [currentCamera, inEditor]);
+
+  useEffect(() => {
+    if (inEditor || !delayedCurrentCamera) return;
+    const t = setTimeout(() => {
+      setCameraSequence(i => i + 1);
+    }, (delayedCurrentCamera?.cameraDuration ?? 0) * 1000);
+    return () => clearTimeout(t);
+  }, [delayedCurrentCamera, inEditor]);
+
+  return !visible || state === "unmounted" ? null : (
+    <Wrapper state={state} bgcolor={bgcolor} duration={transitionDuration}>
+      <Image src={image} alt={title} width={imageW} height={imageH} />
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.div<{ state: TransitionStatus; bgcolor?: string; duration: number }>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  transition: ${({ state, duration }) =>
+    state === "entering" || state === "exiting" ? `all ${duration}s ease` : ""};
+  opacity: ${({ state }) => (state === "entering" || state === "entered" ? 1 : 0)};
+  background-color: ${({ bgcolor }) => bgcolor || "rgba(0, 0, 0, 0.7)"};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  padding: 16px;
+  z-index: ${props => props.theme.zIndexes.splashScreen};
+`;
+
+const Image = styled.img`
+  max-width: 100%;
+`;
+
+export default SplashScreen;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Storytelling/hooks.ts b/web/src/beta/core/Crust/Widgets/Widget/Storytelling/hooks.ts
new file mode 100644
index 0000000000..92eec98953
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Storytelling/hooks.ts
@@ -0,0 +1,192 @@
+import { Math as CesiumMath } from "cesium";
+import { useState, useCallback, useEffect, useMemo, useRef } from "react";
+
+import { Camera, FlyToDestination, LookAtDestination } from "../types";
+
+export type Story = {
+  title: string;
+  layer?: string;
+  layerDuration?: number;
+  layerRange?: number;
+  layerCamera?: Camera;
+};
+
+const defaultRange = 50000;
+const defaultDuration = 3;
+const defaultCamera: Camera = {
+  lat: 0,
+  lng: 0,
+  height: 0,
+  heading: CesiumMath.toRadians(0),
+  pitch: CesiumMath.toRadians(-30),
+  roll: 0,
+  fov: CesiumMath.toRadians(60),
+};
+
+export default function ({
+  duration = defaultDuration,
+  range = defaultRange,
+  camera = defaultCamera,
+  autoStart,
+  stories: storiesData,
+  selectedLayerId,
+  onFlyTo: flyTo,
+  onLookAt: lookAt,
+  onLayerSelect: selectLayer,
+  findPhotooverlayLayer,
+}: {
+  duration?: number;
+  camera?: Camera;
+  range?: number;
+  autoStart?: boolean;
+  stories?: Story[];
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
+  onLookAt?: (camera: LookAtDestination, options?: { duration?: number }) => void;
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId: string | undefined,
+    options?: { reason?: string },
+  ) => void;
+  findPhotooverlayLayer?: (
+    id: string,
+  ) => { title?: string; lat: number; lng: number; height: number } | undefined;
+}) {
+  const [menuOpen, openMenu] = useState(false);
+  const toggleMenu = useCallback(() => openMenu(o => !o), []);
+
+  const [selected, select] = useState<{
+    index: number;
+    story: Story;
+    duration: number;
+    camera: Camera;
+    range: number;
+    noCameraFlight?: boolean;
+  }>();
+
+  const selectedLayer = useMemo(
+    () => (selectedLayerId?.layerId ? findPhotooverlayLayer?.(selectedLayerId.layerId) : undefined),
+    [findPhotooverlayLayer, selectedLayerId],
+  );
+
+  const timeout = useRef<number>();
+
+  useEffect(
+    () => () => {
+      window.clearTimeout(timeout.current);
+    },
+    [],
+  );
+
+  const stories = useMemo<Story[]>(() => {
+    if (!storiesData || !findPhotooverlayLayer) return [];
+    return storiesData.map(story => ({
+      ...story,
+      title: story.title || (story.layer && findPhotooverlayLayer?.(story.layer)?.title) || "",
+    }));
+  }, [findPhotooverlayLayer, storiesData]);
+
+  const selectAt = useCallback(
+    (index: number) => {
+      const story = stories?.[index];
+      if (!story) {
+        select(undefined);
+        return;
+      }
+
+      const id = story?.layer;
+      select({
+        index,
+        story,
+        duration,
+        camera,
+        range,
+      });
+      selectLayer?.(id, undefined, { reason: "storytelling" });
+    },
+    [camera, duration, range, selectLayer, stories],
+  );
+
+  const handleNext = useCallback(() => {
+    selectAt(typeof selected?.index === "undefined" ? 0 : selected.index + 1);
+  }, [selectAt, selected?.index]);
+
+  const handlePrev = useCallback(() => {
+    selectAt(typeof selected?.index === "undefined" ? 0 : selected.index - 1);
+  }, [selectAt, selected?.index]);
+
+  useEffect(() => {
+    openMenu(false);
+  }, [selectedLayer]);
+
+  useEffect(() => {
+    const id = selectedLayerId?.layerId;
+    const index = id ? stories?.findIndex(l => l.layer === id) : undefined;
+    select(
+      typeof index === "number" && index >= 0
+        ? {
+            index,
+            story: stories[index],
+            duration,
+            camera,
+            range,
+            noCameraFlight: true,
+          }
+        : undefined,
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedLayer]); // ignore camera, duration, range, stories
+
+  useEffect(() => {
+    if (!selected || !selectedLayer || selected.noCameraFlight) {
+      return;
+    }
+
+    if (selected.story.layerCamera) {
+      flyTo?.(selected.story.layerCamera, {
+        duration: selected.story.layerDuration ?? selected.duration,
+      });
+      return;
+    }
+
+    const position = {
+      lat: selectedLayer?.lat,
+      lng: selectedLayer?.lng,
+      height: selectedLayer?.height ?? 0,
+    };
+
+    if (typeof position.lat !== "number" && typeof position.lng !== "number") return;
+
+    lookAt?.(
+      {
+        ...position,
+        heading: selected.camera.heading,
+        pitch: selected.camera.pitch,
+        range: selected.story.layerRange ?? selected.range,
+      },
+      {
+        duration: selected.story.layerDuration ?? selected.duration,
+      },
+    );
+  }, [flyTo, lookAt, selected, selectedLayer]);
+
+  useEffect(() => {
+    if (!autoStart) return;
+    selectAt(0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoStart]); // ignore selectAt
+
+  return {
+    stories,
+    menuOpen,
+    selected,
+    handleNext,
+    handlePrev,
+    selectAt,
+    openMenu,
+    toggleMenu,
+  };
+}
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Storytelling/index.stories.tsx b/web/src/beta/core/Crust/Widgets/Widget/Storytelling/index.stories.tsx
new file mode 100644
index 0000000000..c998e5bb96
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Storytelling/index.stories.tsx
@@ -0,0 +1,49 @@
+import { Meta, Story } from "@storybook/react";
+
+import { contextEvents } from "../storybook";
+
+import Component, { Props } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  widget: {
+    id: "",
+    property: {
+      stories: [
+        { layer: "a", title: "a" },
+        { layer: "b", title: "b" },
+        { layer: "c", title: "c" },
+      ],
+    },
+  },
+  context: { ...contextEvents },
+  isBuilt: false,
+  isEditable: false,
+};
+
+export const AutoStart = Template.bind({});
+
+AutoStart.args = {
+  widget: {
+    id: "",
+    property: {
+      stories: [
+        { layer: "a", title: "a" },
+        { layer: "b", title: "b" },
+        { layer: "c", title: "c" },
+      ],
+      default: { autoStart: true },
+    },
+  },
+  context: { ...contextEvents },
+  isBuilt: false,
+  isEditable: false,
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Storytelling/index.tsx b/web/src/beta/core/Crust/Widgets/Widget/Storytelling/index.tsx
new file mode 100644
index 0000000000..e337f8a8d3
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Storytelling/index.tsx
@@ -0,0 +1,262 @@
+import { useRef } from "react";
+import { useClickAway, useMedia } from "react-use";
+
+import Flex from "@reearth/beta/components/Flex";
+import Icon from "@reearth/beta/components/Icon";
+import Text from "@reearth/beta/components/Text";
+import { styled, css, metricsSizes } from "@reearth/services/theme";
+
+import type { ComponentProps as WidgetProps } from "..";
+import type { Camera, Theme } from "../types";
+
+import useHooks, { Story as StoryType } from "./hooks";
+
+export type { Story } from "./hooks";
+export type Props = WidgetProps<Property>;
+
+export type Property = {
+  default?: {
+    duration?: number;
+    range?: number;
+    camera?: Camera;
+    autoStart?: boolean;
+  };
+  stories?: StoryType[];
+};
+
+const Storytelling = ({
+  widget,
+  theme,
+  context: { selectedLayerId, onFlyTo, onLayerSelect, onLookAt, findPhotooverlayLayer } = {},
+}: Props): JSX.Element | null => {
+  const storiesData = widget?.property?.stories;
+  const { camera, duration, autoStart, range } = widget?.property?.default ?? {};
+  const isExtraSmallWindow = useMedia("(max-width: 420px)");
+
+  const { stories, menuOpen, selected, handleNext, handlePrev, selectAt, openMenu, toggleMenu } =
+    useHooks({
+      camera,
+      autoStart,
+      range,
+      duration,
+      stories: storiesData,
+      selectedLayerId,
+      onFlyTo: onFlyTo,
+      onLayerSelect,
+      onLookAt,
+      findPhotooverlayLayer,
+    });
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  useClickAway(wrapperRef, () => {
+    openMenu(false);
+  });
+
+  return (
+    <>
+      <Menu
+        publishedTheme={theme}
+        ref={wrapperRef}
+        menuOpen={menuOpen}
+        extended={!!widget?.extended?.horizontally}
+        area={widget?.layout?.location?.area}
+        align={widget?.layout?.align}>
+        {stories.map((story, i) => (
+          <MenuItem
+            publishedTheme={theme}
+            key={story.layer}
+            selected={selected?.story.layer === story.layer}
+            align="center"
+            onClick={selectAt.bind(undefined, i)}>
+            <StyledIcon
+              iconColor={theme?.mainIcon}
+              icon="marker"
+              size={16}
+              color={selected?.story.layer === story.layer ? theme?.strongText : theme?.mainText}
+            />
+            <Text
+              size="m"
+              color={selected?.story.layer === story.layer ? theme?.strongText : theme?.mainText}
+              otherProperties={{
+                textOverflow: "ellipsis",
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+              }}>
+              {story.title}
+            </Text>
+          </MenuItem>
+        ))}
+      </Menu>
+      <Widget
+        publishedTheme={theme}
+        extended={!!widget.extended?.horizontally}
+        floating={!widget.layout}>
+        <ArrowButton publishedTheme={theme} disabled={!selected?.index} onClick={handlePrev}>
+          <Icon icon="arrowLeft" size={24} />
+        </ArrowButton>
+        <Current align="center" justify="space-between">
+          <MenuIcon
+            publishedTheme={theme}
+            icon="storytellingMenu"
+            onClick={toggleMenu}
+            menuOpen={menuOpen}
+          />
+          <Title color={theme?.mainText} size="m" weight="bold">
+            {selected?.story.title}
+          </Title>
+          <Text
+            color={theme?.weakText}
+            size={isExtraSmallWindow ? "xs" : "m"}
+            weight="bold"
+            otherProperties={{ userSelect: "none" }}>
+            {typeof selected === "undefined" ? "-" : selected.index + 1} /{" "}
+            {stories.length > 0 ? stories.length : "-"}
+          </Text>
+        </Current>
+        <ArrowButton
+          publishedTheme={theme}
+          disabled={selected?.index === stories.length - 1}
+          onClick={handleNext}>
+          <Icon icon="arrowRight" size={24} />
+        </ArrowButton>
+      </Widget>
+    </>
+  );
+};
+
+const Widget = styled.div<{
+  publishedTheme?: Theme;
+  extended?: boolean;
+  floating?: boolean;
+}>`
+  background-color: ${({ publishedTheme }) => publishedTheme?.background};
+  color: ${({ publishedTheme }) => publishedTheme?.mainText};
+  display: flex;
+  align-items: stretch;
+  border-radius: ${metricsSizes["s"]}px;
+  overflow: hidden;
+  height: 80px;
+  width: ${({ extended }) => (extended ? "100%" : "500px")};
+  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
+
+  ${({ floating }) =>
+    floating
+      ? css`
+          position: absolute;
+          bottom: 80px;
+          left: 80px;
+        `
+      : null}
+
+  @media (max-width: 560px) {
+    display: flex;
+    width: ${({ extended }) => (extended ? "100%" : "90vw")};
+    margin: 0 auto;
+    height: 56px;
+  }
+`;
+
+const ArrowButton = styled.button<{ publishedTheme?: Theme }>`
+  background-color: ${({ publishedTheme }) => publishedTheme?.mask};
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  text-align: center;
+  border: none;
+  padding: ${metricsSizes["s"]}px;
+  cursor: pointer;
+  color: ${({ publishedTheme }) => publishedTheme?.mainIcon};
+
+  &:disabled {
+    color: ${({ publishedTheme }) => publishedTheme?.weakIcon};
+    cursor: auto;
+  }
+  @media (max-width: 420px) {
+    padding: ${metricsSizes["2xs"]}px;
+  }
+`;
+
+const Current = styled(Flex)`
+  width: 100%;
+  padding: ${metricsSizes["2xl"]}px;
+  @media (max-width: 420px) {
+    padding: ${metricsSizes["s"]}px;
+  }
+`;
+
+const Title = styled(Text)<{ color?: string }>`
+  color: ${({ color }) => color};
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  box-sizing: border-box;
+  margin: 0 auto;
+  max-width: 250px;
+  text-align: center;
+  @media (max-width: 420px) {
+    max-width: 190px;
+  }
+`;
+
+const StyledIcon = styled(Icon)<{ iconColor?: string }>`
+  color: ${({ color }) => color};
+  margin-right: ${metricsSizes["l"]}px;
+  flex-shrink: 0;
+`;
+
+const MenuIcon = styled(Icon)<{ menuOpen?: boolean; publishedTheme?: Theme }>`
+  background: ${props =>
+    props.menuOpen && props.publishedTheme ? props.publishedTheme.select : "unset"};
+  border-radius: 25px;
+  padding: ${metricsSizes["xs"]}px;
+  margin-right: ${metricsSizes["xs"]}px;
+  cursor: pointer;
+  user-select: none;
+  color: ${({ publishedTheme: theme }) => theme?.mainIcon};
+`;
+
+const Menu = styled.div<{
+  menuOpen?: boolean;
+  publishedTheme?: Theme;
+  extended?: boolean;
+  area?: string;
+  align?: string;
+}>`
+  background-color: ${({ publishedTheme: theme }) => theme?.background};
+  z-index: ${props => props.theme.zIndexes.dropDown};
+  position: absolute;
+  ${({ area, align }) =>
+    area === "top" || (area === "middle" && align === "start") ? "top: 90px" : "bottom: 90px"};
+  width: 324px;
+  max-height: ${({ area, align }) =>
+    area === "middle" && align === "centered" ? "200px" : "500px"};
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  border-radius: ${metricsSizes["s"]}px;
+  display: ${({ menuOpen }) => (!menuOpen ? "none" : "")};
+  padding: ${metricsSizes["m"]}px ${metricsSizes["s"]}px;
+  @media (max-width: 560px) {
+    width: ${({ extended }) => (extended ? `calc(100% - 18px)` : "65vw")};
+    max-height: ${({ area, align }) =>
+      area === "middle" && align === "centered" ? "30vh" : "70vh"};
+    border: 1px solid ${props => props.theme.main.text};
+    top: ${({ area, align }) =>
+      area === "top" || (area === "middle" && align === "start") ? "60px" : null};
+    bottom: ${({ area, align }) =>
+      (area === "middle" && align !== "start") || area !== "top" ? "60px" : null};
+  }
+`;
+
+const MenuItem = styled(Flex)<{ selected?: boolean; publishedTheme?: Theme }>`
+  border-radius: ${metricsSizes["m"]}px;
+  padding: ${metricsSizes["m"]}px ${metricsSizes["s"]}px;
+  background: ${({ publishedTheme: theme, selected }) =>
+    selected && theme ? theme.select : "inherit"};
+  cursor: pointer;
+  user-select: none;
+  &:hover {
+    background: ${props => !props.selected && props.publishedTheme?.mask};
+  }
+`;
+
+export default Storytelling;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Timeline/hooks.ts b/web/src/beta/core/Crust/Widgets/Widget/Timeline/hooks.ts
new file mode 100644
index 0000000000..0a761d2910
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Timeline/hooks.ts
@@ -0,0 +1,241 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+
+import type { TimeEventHandler } from "@reearth/beta/components/Timeline";
+import { TickEvent, TickEventCallback } from "@reearth/beta/core/Map";
+
+import type { Clock, Widget } from "../types";
+import { useVisible } from "../useVisible";
+
+const MAX_RANGE = 86400000; // a day
+const getOrNewDate = (d?: Date) => d ?? new Date();
+const makeRange = (startTime?: number, stopTime?: number) => {
+  // To avoid out of range error in Cesium, we need to turn back a hour.
+  const now = Date.now() - 3600000;
+  return {
+    start: startTime || now - MAX_RANGE,
+    end: stopTime || now,
+  };
+};
+
+const DEFAULT_SPEED = 1;
+
+export const useTimeline = ({
+  widget,
+  clock,
+  overriddenClock,
+  isMobile,
+  onPlay,
+  onPause,
+  onTimeChange,
+  onSpeedChange,
+  onTick,
+  removeTickEventListener,
+  onExtend,
+  onVisibilityChange,
+}: {
+  widget: Widget;
+  clock?: Clock;
+  overriddenClock?: Partial<Clock>;
+  isMobile?: boolean;
+  onPlay?: () => void;
+  onPause?: () => void;
+  onSpeedChange?: (speed: number) => void;
+  onTimeChange?: (time: Date) => void;
+  onTick?: TickEvent;
+  removeTickEventListener?: TickEvent;
+  onExtend?: (id: string, extended: boolean | undefined) => void;
+  onVisibilityChange?: (id: string, v: boolean) => void;
+}) => {
+  const visible = useVisible({
+    widgetId: widget.id,
+    visible: widget.property?.default?.visible,
+    isMobile,
+    onVisibilityChange,
+  });
+  const widgetId = widget.id;
+  const [range, setRange] = useState(() =>
+    makeRange(clock?.start?.getTime(), clock?.stop?.getTime()),
+  );
+  const [isOpened, setIsOpened] = useState(true);
+  const [currentTime, setCurrentTime] = useState(() => getOrNewDate(clock?.current).getTime());
+  const isClockInitialized = useRef(false);
+  const clockStartTime = clock?.start?.getTime();
+  const clockStopTime = clock?.stop?.getTime();
+  const clockSpeed = clock?.speed || DEFAULT_SPEED;
+
+  const [speed, setSpeed] = useState(clockSpeed);
+
+  const handleOnOpen = useCallback(() => {
+    onExtend?.(widgetId, undefined);
+    setIsOpened(true);
+  }, [widgetId, onExtend]);
+
+  const handleOnClose = useCallback(() => {
+    onExtend?.(widgetId, false);
+    setIsOpened(false);
+  }, [widgetId, onExtend]);
+
+  const switchCurrentTimeToStart = useCallback(
+    (t: number, isRangeChanged: boolean) => {
+      const cur = isRangeChanged
+        ? t
+        : t > range.end
+        ? range.start
+        : t < range.start
+        ? range.end
+        : t;
+      onTimeChange?.(new Date(cur));
+      return cur;
+    },
+    [range, onTimeChange],
+  );
+
+  const handleTimeEvent: TimeEventHandler = useCallback(
+    currentTime => {
+      if (!clock) {
+        return;
+      }
+      const t = new Date(currentTime);
+      onTimeChange?.(t);
+      setCurrentTime(currentTime);
+    },
+    [clock, onTimeChange],
+  );
+
+  const handleOnPlay = useCallback(
+    (playing: boolean) => {
+      if (!clock) {
+        return;
+      }
+
+      // Stop cesium animation
+      if (playing) {
+        onPlay?.();
+      } else {
+        onPause?.();
+      }
+      onSpeedChange?.(Math.abs(speed));
+    },
+    [clock, onPause, onPlay, onSpeedChange, speed],
+  );
+
+  const handleOnPlayReversed = useCallback(
+    (playing: boolean) => {
+      if (!clock) {
+        return;
+      }
+
+      // Stop cesium animation
+      if (playing) {
+        onPlay?.();
+      } else {
+        onPause?.();
+      }
+      onSpeedChange?.(Math.abs(speed) * -1);
+    },
+    [clock, onPause, onPlay, onSpeedChange, speed],
+  );
+
+  const handleOnSpeedChange = useCallback(
+    (speed: number) => {
+      setSpeed(speed);
+      if (clock) {
+        const absSpeed = Math.abs(speed);
+        // Maybe we need to throttle changing speed.
+        onSpeedChange?.((clock.speed ?? 1) > 0 ? absSpeed : absSpeed * -1);
+      }
+    },
+    [clock, onSpeedChange],
+  );
+
+  // Initialize clock value
+  useEffect(() => {
+    if (clock && !isClockInitialized.current) {
+      isClockInitialized.current = true;
+      queueMicrotask(() => {
+        onSpeedChange?.(1);
+      });
+    }
+  }, [clock, onSpeedChange, onTick]);
+
+  const handleRange = useCallback((start: number | undefined, stop: number | undefined) => {
+    setRange(prev => {
+      const next = makeRange(start, stop);
+      if (prev.start !== next.start || prev.end !== next.end) {
+        return next;
+      }
+      return prev;
+    });
+  }, []);
+
+  const overriddenStart = overriddenClock?.start?.getTime();
+  const overriddenStop = overriddenClock?.stop?.getTime();
+
+  // Sync cesium clock.
+  useEffect(() => {
+    handleRange(overriddenStart ?? clockStartTime, overriddenStop ?? clockStopTime);
+    setSpeed(Math.abs(clockSpeed));
+  }, [clockStartTime, clockStopTime, clockSpeed, overriddenStart, overriddenStop, handleRange]);
+
+  useEffect(() => {
+    const h: TickEventCallback = (d, c) => {
+      const isDifferentRange = range.start !== c.start.getTime() || range.end !== c.stop.getTime();
+      if (isDifferentRange) {
+        handleRange(c.start.getTime(), c.stop.getTime());
+      }
+      setCurrentTime(switchCurrentTimeToStart(d.getTime(), isDifferentRange));
+    };
+    onTick?.(h);
+    return () => {
+      removeTickEventListener?.(h);
+    };
+  }, [
+    onTick,
+    clock?.playing,
+    removeTickEventListener,
+    switchCurrentTimeToStart,
+    handleRange,
+    range.start,
+    range.end,
+  ]);
+
+  const onTimeChangeRef = useRef<typeof onTimeChange>();
+
+  useEffect(() => {
+    onTimeChangeRef.current = onTimeChange;
+  }, [onTimeChange]);
+
+  const overriddenCurrentTime = overriddenClock?.current?.getTime();
+  useEffect(() => {
+    if (overriddenCurrentTime) {
+      const t = Math.max(Math.min(range.end, overriddenCurrentTime), range.start);
+      setCurrentTime(t);
+      onTimeChangeRef.current?.(new Date(t));
+    }
+  }, [overriddenCurrentTime, range]);
+
+  useEffect(() => {
+    if (isMobile) {
+      onExtend?.(widgetId, true);
+    } else {
+      onExtend?.(widgetId, undefined);
+    }
+  }, [widgetId, onExtend, isMobile]);
+
+  return {
+    speed,
+    range,
+    isOpened,
+    currentTime,
+    visible,
+    events: {
+      onOpen: handleOnOpen,
+      onClose: handleOnClose,
+      onClick: handleTimeEvent,
+      onDrag: handleTimeEvent,
+      onPlay: handleOnPlay,
+      onPlayReversed: handleOnPlayReversed,
+      onSpeedChange: handleOnSpeedChange,
+    },
+  };
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Timeline/index.stories.tsx b/web/src/beta/core/Crust/Widgets/Widget/Timeline/index.stories.tsx
new file mode 100644
index 0000000000..321953e8e8
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Timeline/index.stories.tsx
@@ -0,0 +1,38 @@
+import { Meta, Story } from "@storybook/react";
+
+import { contextEvents } from "../storybook";
+
+import Component, { Props } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  widget: {
+    id: "",
+    extended: {
+      horizontally: false,
+      vertically: false,
+    },
+  },
+  context: { ...contextEvents },
+};
+
+export const Extended = Template.bind({});
+
+Extended.args = {
+  widget: {
+    id: "",
+    extended: {
+      horizontally: true,
+      vertically: false,
+    },
+  },
+  context: { ...contextEvents },
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/Timeline/index.tsx b/web/src/beta/core/Crust/Widgets/Widget/Timeline/index.tsx
new file mode 100644
index 0000000000..1d09ee95b5
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/Timeline/index.tsx
@@ -0,0 +1,75 @@
+import TimelineUI from "@reearth/beta/components/Timeline";
+import { styled } from "@reearth/services/theme";
+
+import type { ComponentProps as WidgetProps } from "..";
+import { Visible } from "../useVisible";
+
+import { useTimeline } from "./hooks";
+
+export type Props = WidgetProps<Property>;
+
+export type Property = {
+  default: {
+    visible: Visible;
+  };
+};
+
+const Timeline = ({
+  widget,
+  theme,
+  isMobile,
+  onExtend,
+  onVisibilityChange,
+  context: {
+    clock,
+    overriddenClock,
+    onPlay,
+    onPause,
+    onSpeedChange,
+    onTimeChange,
+    onTick,
+    removeTickEventListener,
+  } = {},
+}: Props): JSX.Element | null => {
+  const { isOpened, currentTime, range, speed, events, visible } = useTimeline({
+    widget,
+    clock,
+    overriddenClock,
+    isMobile,
+    onPlay,
+    onPause,
+    onSpeedChange,
+    onTimeChange,
+    onTick,
+    removeTickEventListener,
+    onExtend,
+    onVisibilityChange,
+  });
+
+  return visible ? (
+    <Widget extended={!!widget?.extended?.horizontally} opened={isOpened}>
+      <TimelineUI
+        isOpened={isOpened}
+        currentTime={currentTime}
+        range={range}
+        theme={theme}
+        speed={speed}
+        {...events}
+      />
+    </Widget>
+  ) : null;
+};
+
+const Widget = styled.div<{
+  extended?: boolean;
+  opened?: boolean;
+}>`
+  max-width: 100vw;
+  width: ${({ extended, opened }) => (extended && opened ? "100%" : opened ? "720px" : "auto")};
+
+  @media (max-width: 768px) {
+    width: ${({ extended, opened }) => (extended && opened ? "100%" : opened ? "90vw" : "auto")};
+  }
+`;
+
+export default Timeline;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/builtin.ts b/web/src/beta/core/Crust/Widgets/Widget/builtin.ts
new file mode 100644
index 0000000000..0918aed4f5
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/builtin.ts
@@ -0,0 +1,55 @@
+import Button from "./Button";
+import Menu from "./LegacyMenu";
+import Navigator from "./Navigator";
+import SplashScreen from "./SplashScreen";
+import Storytelling from "./Storytelling";
+import Timeline from "./Timeline";
+
+import type { Component } from ".";
+
+export const MENU_BUILTIN_WIDGET_ID = "reearth/menu"; // legacy
+export const BUTTON_BUILTIN_WIDGET_ID = "reearth/button";
+export const SPLASHSCREEN_BUILTIN_WIDGET_ID = "reearth/splashscreen";
+export const STORYTELLING_BUILTIN_WIDGET_ID = "reearth/storytelling";
+export const TIMELINE_BUILTIN_WIDGET_ID = "reearth/timeline";
+export const NAVIGATOR_BUILTIN_WIDGET_ID = "reearth/navigator";
+
+export type BuiltinWidgets<T = unknown> = Record<
+  | typeof MENU_BUILTIN_WIDGET_ID
+  | typeof BUTTON_BUILTIN_WIDGET_ID
+  | typeof SPLASHSCREEN_BUILTIN_WIDGET_ID
+  | typeof STORYTELLING_BUILTIN_WIDGET_ID
+  | typeof TIMELINE_BUILTIN_WIDGET_ID
+  | typeof NAVIGATOR_BUILTIN_WIDGET_ID,
+  T
+>;
+
+const BUILTIN_WIDGET_OPTIONS: BuiltinWidgets<{ animation?: boolean }> = {
+  [MENU_BUILTIN_WIDGET_ID]: {},
+  [BUTTON_BUILTIN_WIDGET_ID]: {},
+  [SPLASHSCREEN_BUILTIN_WIDGET_ID]: {},
+  [STORYTELLING_BUILTIN_WIDGET_ID]: {},
+  [TIMELINE_BUILTIN_WIDGET_ID]: {
+    animation: true,
+  },
+  [NAVIGATOR_BUILTIN_WIDGET_ID]: {
+    animation: true,
+  },
+};
+
+export const getBuiltinWidgetOptions = (id: string) =>
+  BUILTIN_WIDGET_OPTIONS[id as keyof BuiltinWidgets];
+
+export const isBuiltinWidget = (id: string): id is keyof BuiltinWidgets =>
+  !!builtin[id as keyof BuiltinWidgets];
+
+const builtin: BuiltinWidgets<Component> = {
+  [MENU_BUILTIN_WIDGET_ID]: Menu,
+  [BUTTON_BUILTIN_WIDGET_ID]: Button,
+  [SPLASHSCREEN_BUILTIN_WIDGET_ID]: SplashScreen,
+  [STORYTELLING_BUILTIN_WIDGET_ID]: Storytelling,
+  [TIMELINE_BUILTIN_WIDGET_ID]: Timeline,
+  [NAVIGATOR_BUILTIN_WIDGET_ID]: Navigator,
+};
+
+export default builtin;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/index.stories.tsx b/web/src/beta/core/Crust/Widgets/Widget/index.stories.tsx
new file mode 100644
index 0000000000..4af699afe6
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/index.stories.tsx
@@ -0,0 +1,110 @@
+import { Meta, Story } from "@storybook/react";
+import { Math as CesiumMath } from "cesium";
+
+import { contextEvents } from "./storybook";
+
+import Widget, { Props } from ".";
+
+export default {
+  component: Widget,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+export const Default: Story<Props> = args => <Widget {...args} />;
+
+Default.args = {
+  widget: {
+    id: "",
+    pluginId: "reearth",
+    extensionId: "menu",
+    extended: false,
+    property: {
+      buttons: [
+        {
+          id: "menu",
+          buttonType: "menu",
+          buttonTitle: "Menu",
+          buttonPosition: "topleft",
+          buttonStyle: "text",
+        },
+        {
+          id: "google",
+          buttonType: "link",
+          buttonLink: "https://google.com",
+          buttonTitle: "Google",
+          buttonPosition: "topleft",
+          buttonStyle: "text",
+          buttonBgcolor: "red",
+        },
+        {
+          id: "twitter",
+          buttonType: "link",
+          buttonLink: "https://twitter.com",
+          buttonTitle: "Twitter",
+          buttonPosition: "bottomright",
+          buttonStyle: "text",
+          buttonBgcolor: "#0ff",
+        },
+        {
+          id: "hoge",
+          buttonType: "camera",
+          buttonPosition: "bottomright",
+          buttonCamera: {
+            lat: 0,
+            lng: 0,
+            height: 1000,
+            fov: CesiumMath.toRadians(60),
+            heading: 0,
+            pitch: 0,
+            roll: 0,
+          },
+          buttonTitle: "hoge",
+        },
+        {
+          id: "menu2",
+          buttonType: "menu",
+          buttonIcon: "/sample.svg",
+          buttonPosition: "bottomleft",
+          buttonStyle: "icon",
+        },
+        {
+          id: "menu3",
+          buttonType: "menu",
+          buttonTitle: "Menu",
+          buttonIcon: "/sample.svg",
+          buttonPosition: "bottomleft",
+          buttonStyle: "texticon",
+        },
+      ],
+      menu: [
+        {
+          id: "hoge",
+          menuTitle: "Hoge",
+          menuType: "camera",
+          menuCamera: {
+            lat: 0,
+            lng: 0,
+            height: 1000,
+            fov: CesiumMath.toRadians(60),
+            heading: 0,
+            pitch: 0,
+            roll: 0,
+          },
+        },
+        {
+          id: "hoge",
+          menuType: "border",
+        },
+        {
+          id: "GitHub",
+          menuType: "link",
+          menuTitle: "GitHub",
+          menuLink: "https://github.com",
+        },
+      ],
+    },
+  },
+  isBuilt: false,
+  isEditable: false,
+  context: { ...contextEvents },
+};
diff --git a/web/src/beta/core/Crust/Widgets/Widget/index.tsx b/web/src/beta/core/Crust/Widgets/Widget/index.tsx
new file mode 100644
index 0000000000..7b9c4f134b
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/index.tsx
@@ -0,0 +1,122 @@
+import { ComponentType, ReactNode, useMemo } from "react";
+
+import type { TickEvent } from "@reearth/beta/core/Map";
+
+import builtin, { isBuiltinWidget } from "./builtin";
+import type {
+  Theme,
+  FlyToDestination,
+  Widget,
+  WidgetLayout,
+  WidgetLocation,
+  LookAtDestination,
+  Clock,
+  Camera,
+  InternalWidget,
+} from "./types";
+
+export type { WidgetLayout } from "../types";
+export { isBuiltinWidget, type BuiltinWidgets, getBuiltinWidgetOptions } from "./builtin";
+
+export type Props = {
+  widget: InternalWidget;
+  extended?: boolean;
+  editing?: boolean;
+  layout?: WidgetLayout;
+  theme?: Theme;
+  isEditable?: boolean;
+  inEditor?: boolean;
+  isBuilt?: boolean;
+  isMobile?: boolean;
+  context?: Context;
+  onExtend?: (id: string, extended: boolean | undefined) => void;
+  onVisibilityChange?: (id: string, visible: boolean) => void;
+  renderWidget?: (w: Widget) => ReactNode;
+};
+
+export type Context = {
+  clock?: Clock;
+  overriddenClock?: Partial<Clock>;
+  updateClockOnLoad?: boolean;
+  camera?: Camera;
+  initialCamera?: Camera;
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  is2d?: boolean;
+  onFlyTo?: (target: string | FlyToDestination, options?: { duration?: number }) => void;
+  onLookAt?: (camera: LookAtDestination, options?: { duration?: number }) => void;
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId: string | undefined,
+    options?: { reason?: string },
+  ) => void;
+  onPlay?: () => void;
+  onPause?: () => void;
+  onSpeedChange?: (speed: number) => void;
+  onTimeChange?: (time: Date) => void;
+  onTick?: TickEvent;
+  removeTickEventListener?: TickEvent;
+  onZoomIn?: (amount: number) => void;
+  onZoomOut?: (amount: number) => void;
+  onCameraOrbit?: (radians: number) => void;
+  onCameraRotateRight?: (radians: number) => void;
+  findPhotooverlayLayer?: (
+    id: string,
+  ) => { title?: string; lat: number; lng: number; height: number } | undefined;
+};
+
+export type ComponentProps<P = any> = Omit<Props, "widget" | "renderWidget"> & {
+  widget: Widget<P>;
+};
+
+export type Component = ComponentType<ComponentProps>;
+
+export default function WidgetComponent({
+  widget,
+  editing,
+  renderWidget,
+  ...props
+}: Props): JSX.Element | null {
+  const { align, location } = props.layout ?? {};
+  const horizontal = location ? isHorizontal(location) : false;
+  const vertical = location ? isVertical(location) : false;
+  const actualExtended = !!(props.extended ?? widget.extended);
+
+  const w = useMemo<Widget | undefined>(
+    () => ({
+      ...widget,
+      extended: {
+        horizontally: actualExtended && horizontal,
+        vertically: actualExtended && vertical,
+      },
+      layout: align && location ? { align, location } : undefined,
+    }),
+    [widget, actualExtended, horizontal, vertical, align, location],
+  );
+
+  if (!w) return null;
+
+  const builtinWidgetId = `${w.pluginId}/${w.extensionId}`;
+  const Builtin = isBuiltinWidget(builtinWidgetId) ? builtin[builtinWidgetId] : undefined;
+
+  return Builtin ? (
+    <div
+      style={{
+        pointerEvents: editing ? "none" : "auto",
+      }}>
+      <Builtin {...props} editing={editing} widget={w} />
+    </div>
+  ) : (
+    <>{renderWidget?.(w)}</>
+  );
+}
+
+function isHorizontal(l: WidgetLocation): boolean {
+  return l.section === "center";
+}
+
+function isVertical(l: WidgetLocation): boolean {
+  return l.area === "middle";
+}
diff --git a/web/src/beta/core/Crust/Widgets/Widget/storybook.ts b/web/src/beta/core/Crust/Widgets/Widget/storybook.ts
new file mode 100644
index 0000000000..c932980e90
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/storybook.ts
@@ -0,0 +1,22 @@
+import { actions } from "@storybook/addon-actions";
+
+import type { Context } from ".";
+
+export const contextEvents: Context = {
+  ...actions<PickString<keyof Context>>({
+    onCameraOrbit: "onCameraOrbit",
+    onCameraRotateRight: "onCameraRotateRight",
+    onFlyTo: "onFlyTo",
+    onLayerSelect: "onLayerSelect",
+    onLookAt: "onLookAt",
+    onPause: "onPause",
+    onPlay: "onPlay",
+    onSpeedChange: "onSpeedChange",
+    onTick: "onTick",
+    onTimeChange: "onTimeChange",
+    onZoomIn: "onZoomIn",
+    onZoomOut: "onZoomOut",
+  }),
+};
+
+type PickString<T> = T extends `on${string}` ? T : never;
diff --git a/web/src/beta/core/Crust/Widgets/Widget/types.ts b/web/src/beta/core/Crust/Widgets/Widget/types.ts
new file mode 100644
index 0000000000..1d88fab9a9
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/types.ts
@@ -0,0 +1,11 @@
+export type {
+  Camera,
+  FlyToDestination,
+  LookAtDestination,
+  Theme,
+  Widget,
+  WidgetLayout,
+  WidgetLocation,
+  Clock,
+  InternalWidget,
+} from "../types";
diff --git a/web/src/beta/core/Crust/Widgets/Widget/useVisible.ts b/web/src/beta/core/Crust/Widgets/Widget/useVisible.ts
new file mode 100644
index 0000000000..e6ae3e7555
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/Widget/useVisible.ts
@@ -0,0 +1,32 @@
+import { useEffect, useMemo } from "react";
+
+export type Visible = "always" | "desktop" | "mobile";
+
+export const useVisible = ({
+  widgetId,
+  visible: defaultVisible,
+  isMobile,
+  onVisibilityChange,
+}: {
+  widgetId: string | undefined;
+  visible: Visible | undefined;
+  isMobile: boolean | undefined;
+  onVisibilityChange: ((id: string, v: boolean) => void) | undefined;
+}) => {
+  const visible = useMemo(
+    () =>
+      !defaultVisible ||
+      defaultVisible === "always" ||
+      (defaultVisible === "desktop" && !isMobile) ||
+      (defaultVisible === "mobile" && !!isMobile),
+    [defaultVisible, isMobile],
+  );
+
+  useEffect(() => {
+    if (widgetId) {
+      onVisibilityChange?.(widgetId, visible);
+    }
+  }, [widgetId, visible, onVisibilityChange]);
+
+  return visible;
+};
diff --git a/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/Area.tsx b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/Area.tsx
new file mode 100644
index 0000000000..242bedb157
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/Area.tsx
@@ -0,0 +1,218 @@
+import { omit, pick } from "lodash-es";
+import { ReactNode, useCallback, useMemo, useState } from "react";
+import { GridArea, GridItem } from "react-align";
+import { useDeepCompareEffect } from "react-use";
+
+import { useTheme } from "@reearth/services/theme";
+
+import type {
+  Alignment,
+  WidgetAreaPadding,
+  WidgetLayoutConstraint,
+  Location,
+  WidgetLayout,
+  WidgetProps,
+  InternalWidget,
+} from "./types";
+
+export type WidgetAreaType = {
+  zone: "inner" | "outer";
+  section: "left" | "center" | "right";
+  area: "top" | "middle" | "bottom";
+  align?: Alignment;
+  padding?: WidgetAreaPadding;
+  widgets?: InternalWidget[];
+  gap?: number | null;
+  centered?: boolean;
+  background?: string;
+};
+
+type Props = {
+  selectedWidgetArea?: WidgetAreaType;
+  zone: "inner" | "outer";
+  section: "left" | "center" | "right";
+  area: "top" | "middle" | "bottom";
+  align?: Alignment;
+  padding?: WidgetAreaPadding;
+  backgroundColor?: string;
+  gap?: number;
+  centered?: boolean;
+  built?: boolean;
+  widgets?: InternalWidget[];
+  onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
+  // note that layoutConstraint will be always undefined in published pages
+  layoutConstraint?: { [w in string]: WidgetLayoutConstraint };
+  renderWidget?: (props: WidgetProps) => ReactNode;
+};
+
+export default function Area({
+  selectedWidgetArea,
+  zone,
+  section,
+  area,
+  align,
+  padding,
+  backgroundColor,
+  gap,
+  centered,
+  built,
+  widgets,
+  layoutConstraint,
+  renderWidget,
+  onWidgetAreaSelect,
+}: Props) {
+  const theme = useTheme();
+  const layout = useMemo<WidgetLayout>(
+    () => ({
+      location: { zone, section, area },
+      align,
+    }),
+    [align, area, section, zone],
+  );
+  const { overriddenExtended, handleExtend } = useOverriddenExtended({ layout, widgets });
+
+  return !(zone === "inner" && section === "center" && area === "middle") ? (
+    <GridArea
+      key={area}
+      onClick={() =>
+        widgets?.length &&
+        onWidgetAreaSelect?.({
+          area,
+          section,
+          zone,
+          background: backgroundColor,
+          centered,
+          gap,
+          padding: {
+            top: padding?.top ?? 6,
+            bottom: padding?.bottom ?? 6,
+            left: padding?.left ?? 6,
+            right: padding?.right ?? 6,
+          },
+        })
+      }
+      id={`${zone}/${section}/${area}`}
+      vertical={area === "middle"}
+      stretch={area === "middle"}
+      bottom={(section === "right" && area !== "top") || area === "bottom"}
+      realignable={(area === "middle" || section === "center") && !!widgets?.length}
+      align={
+        widgets?.length
+          ? area === "middle" || section === "center"
+            ? align
+            : section === "right"
+            ? "end"
+            : undefined
+          : undefined
+      }
+      style={{
+        flexWrap: "wrap",
+        pointerEvents: "none",
+        padding: widgets?.length
+          ? `${padding?.top}px ${padding?.right}px ${padding?.bottom}px ${padding?.left}px`
+          : "0",
+        backgroundColor: backgroundColor,
+        gap: gap,
+        alignItems: centered ? "center" : "unset",
+        borderRadius: 0,
+        transition: built ? "none" : undefined,
+      }}
+      editorStyle={{
+        flexWrap: "wrap",
+        padding: `${padding?.top}px ${padding?.right}px ${padding?.bottom}px ${padding?.left}px`,
+        background: backgroundColor
+          ? backgroundColor
+          : area === "middle"
+          ? theme.alignSystem.blueBg
+          : theme.alignSystem.orangeBg,
+        border:
+          `${selectedWidgetArea?.zone}/${selectedWidgetArea?.section}/${selectedWidgetArea?.area}` ===
+          `${zone}/${section}/${area}`
+            ? `1.2px dashed #00FFFF`
+            : area === "middle"
+            ? `1px solid ${theme.alignSystem.blueHighlight}`
+            : `1px solid ${theme.alignSystem.orangeHighlight}`,
+        gap: gap,
+        alignItems: centered ? "center" : "unset",
+      }}
+      iconColor={area === "middle" ? "#4770FF" : "#E95518"}>
+      {widgets?.map((widget, i) => {
+        const constraint =
+          widget.pluginId && widget.extensionId
+            ? layoutConstraint?.[`${widget.pluginId}/${widget.extensionId}`]
+            : undefined;
+        const extended = overriddenExtended?.[widget.id];
+        const extendable2 =
+          (section === "center" && constraint?.extendable?.horizontally) ||
+          (area === "middle" && constraint?.extendable?.vertically);
+        return (
+          <GridItem
+            key={widget.id}
+            id={widget.id}
+            index={i}
+            extended={extended ?? widget.extended}
+            extendable={extendable2}
+            style={{ pointerEvents: "none", margin: 0 }}
+            editorStyle={{ margin: 0 }}>
+            {({ editing }) =>
+              renderWidget?.({
+                widget,
+                layout,
+                extended,
+                editing,
+                onExtend: handleExtend,
+              })
+            }
+          </GridItem>
+        );
+      })}
+    </GridArea>
+  ) : null;
+}
+
+function useOverriddenExtended({
+  layout,
+  widgets,
+}: {
+  layout: WidgetLayout;
+  widgets: InternalWidget[] | undefined;
+}) {
+  const extendable = layout.location.section === "center" || layout.location.area === "middle";
+  const [overriddenExtended, overrideExtend] = useState<{ [id in string]?: boolean }>({});
+  const handleExtend = useCallback(
+    (id: string, extended: boolean | undefined) => {
+      overrideExtend(oe =>
+        oe[id] === extended
+          ? oe
+          : {
+              ...omit(oe, id),
+              ...(typeof extended === "undefined" || !extendable ? {} : { [id]: extended }),
+            },
+      );
+    },
+    [extendable],
+  );
+
+  const widgetIds = widgets?.map(w => w.id) ?? [];
+  useDeepCompareEffect(() => {
+    overrideExtend(oe => pick(oe, Object.keys(widgetIds)));
+  }, [widgetIds]);
+
+  return {
+    overriddenExtended: extendable ? overriddenExtended : undefined,
+    handleExtend,
+  };
+}
+
+export function getLocationFromId(id: string): Location | undefined {
+  const [z, s, a] = id.split("/");
+  return (z === "inner" || z === "outer") &&
+    (s === "left" || s === "center" || s === "right") &&
+    (a === "top" || a === "middle" || a === "bottom")
+    ? {
+        zone: z,
+        section: s,
+        area: a,
+      }
+    : undefined;
+}
diff --git a/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
new file mode 100644
index 0000000000..40cf3a8b49
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/MobileZone.tsx
@@ -0,0 +1,145 @@
+import { ReactNode, useState, useMemo, useEffect } from "react";
+import { GridSection } from "react-align";
+
+import Icon from "@reearth/beta/components/Icon";
+import Slide from "@reearth/beta/components/Slide";
+import { styled } from "@reearth/services/theme";
+
+import Area, { WidgetAreaType } from "./Area";
+import type { WidgetZone, WidgetLayoutConstraint, Theme, WidgetProps } from "./types";
+import { filterSections } from "./utils";
+
+export type Props = {
+  children?: ReactNode;
+  selectedWidgetArea?: WidgetAreaType;
+  zone?: WidgetZone;
+  zoneName: "inner" | "outer";
+  theme?: Theme;
+  built?: boolean;
+  layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  invisibleWidgetIDs?: string[];
+  renderWidget?: (props: WidgetProps) => ReactNode;
+  onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
+};
+
+const areas = ["top", "middle", "bottom"] as const;
+
+export default function MobileZone({
+  selectedWidgetArea,
+  zone,
+  zoneName,
+  layoutConstraint,
+  theme,
+  built,
+  children,
+  invisibleWidgetIDs,
+  renderWidget,
+  onWidgetAreaSelect,
+}: Props) {
+  const filteredSections = useMemo(() => {
+    return filterSections(zone, invisibleWidgetIDs, s => s === "center" && children);
+  }, [zone, children, invisibleWidgetIDs]);
+
+  const initialPos = useMemo(() => (filteredSections.length === 3 ? 1 : 0), [filteredSections]);
+
+  const [pos, setPos] = useState(initialPos);
+
+  useEffect(() => {
+    setPos(initialPos);
+  }, [initialPos]);
+
+  return (
+    <>
+      <StyledSlide pos={pos} filteredSections={filteredSections.length > 1}>
+        {filteredSections.map(s => (
+          <GridSection key={s} stretch>
+            {areas.map(a =>
+              s === "center" && children && a === "middle" ? (
+                <div key={a} style={{ display: "flex", flex: "1 0 auto" }}>
+                  {children}
+                </div>
+              ) : (
+                <Area
+                  key={a}
+                  selectedWidgetArea={selectedWidgetArea}
+                  zone={zoneName}
+                  section={s}
+                  area={a}
+                  widgets={zone?.[s]?.[a]?.widgets}
+                  align={zone?.[s]?.[a]?.align ?? "start"}
+                  padding={zone?.[s]?.[a]?.padding ?? { top: 6, bottom: 6, left: 6, right: 6 }}
+                  gap={zone?.[s]?.[a]?.gap ?? 6}
+                  centered={zone?.[s]?.[a]?.centered ?? false}
+                  backgroundColor={zone?.[s]?.[a]?.background ?? "unset"}
+                  layoutConstraint={layoutConstraint}
+                  built={built}
+                  renderWidget={renderWidget}
+                  onWidgetAreaSelect={onWidgetAreaSelect}
+                />
+              ),
+            )}
+          </GridSection>
+        ))}
+      </StyledSlide>
+      {filteredSections.length > 1 ? (
+        <Controls publishedTheme={theme}>
+          <Control leftIcon onClick={() => pos > 0 && setPos(pos - 1)}>
+            {pos > 0 && <Icon icon="arrowLongLeft" size={24} color={theme?.mainIcon} />}
+          </Control>
+          <InnerControlWrapper>
+            {filteredSections.map((_, i) => (
+              <Control key={i} onClick={() => setPos(i)}>
+                <PageIcon current={pos === i} publishedTheme={theme} />
+              </Control>
+            ))}
+          </InnerControlWrapper>
+          <Control rightIcon onClick={() => pos < filteredSections.length - 1 && setPos(pos + 1)}>
+            {pos < filteredSections.length - 1 && (
+              <Icon icon="arrowLongRight" size={24} color={theme?.mainIcon} />
+            )}
+          </Control>
+        </Controls>
+      ) : null}
+    </>
+  );
+}
+
+const StyledSlide = styled(Slide)<{ filteredSections?: boolean }>`
+  height: calc(100% ${({ filteredSections }) => filteredSections && "- 32px"});
+`;
+
+const Controls = styled.div<{ publishedTheme?: Theme }>`
+  position: absolute;
+  bottom: 0;
+  height: 32px;
+  width: 100%;
+  background: ${({ publishedTheme }) => publishedTheme?.background};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
+const InnerControlWrapper = styled.div`
+  display: flex;
+`;
+
+const Control = styled.div<{ leftIcon?: boolean; rightIcon?: boolean }>`
+  height: 100%;
+  flex: 1;
+  display: flex;
+  justify-content: ${({ leftIcon, rightIcon }) =>
+    leftIcon ? "flex-start" : rightIcon ? "flex-end" : undefined};
+  align-items: center;
+  cursor: pointer;
+  pointer-events: auto;
+  padding: 0 8px;
+  transition: all 0.2s ease-in-out 0.1s;
+`;
+
+const PageIcon = styled.div<{ current?: boolean; publishedTheme?: Theme }>`
+  border: 1px solid ${({ publishedTheme }) => publishedTheme?.mainIcon};
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: ${({ current, publishedTheme }) => (current ? publishedTheme?.mainIcon : null)};
+`;
diff --git a/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/Zone.tsx b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/Zone.tsx
new file mode 100644
index 0000000000..25b2a4cc68
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/Zone.tsx
@@ -0,0 +1,67 @@
+import { ReactNode } from "react";
+import { GridSection } from "react-align";
+
+import Area, { WidgetAreaType } from "./Area";
+import type { WidgetZone, WidgetLayoutConstraint, WidgetProps } from "./types";
+
+export type { WidgetAreaType };
+
+export type Props = {
+  children?: ReactNode;
+  selectedWidgetArea?: WidgetAreaType;
+  zone?: WidgetZone;
+  zoneName: "inner" | "outer";
+  invisibleWidgetIDs?: string[];
+  layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  built?: boolean;
+  renderWidget?: (props: WidgetProps) => ReactNode;
+  onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
+};
+
+const sections = ["left", "center", "right"] as const;
+const areas = ["top", "middle", "bottom"] as const;
+
+export default function Zone({
+  selectedWidgetArea,
+  zone,
+  zoneName,
+  layoutConstraint,
+  built,
+  children,
+  renderWidget,
+  onWidgetAreaSelect,
+}: Props) {
+  return (
+    <>
+      {sections.map(s => (
+        <GridSection key={s} stretch={s === "center"}>
+          {areas.map(a =>
+            s === "center" && children && a === "middle" ? (
+              <div key={a} style={{ display: "flex", flex: "1 0 auto" }}>
+                {children}
+              </div>
+            ) : (
+              <Area
+                key={a}
+                selectedWidgetArea={selectedWidgetArea}
+                zone={zoneName}
+                section={s}
+                area={a}
+                widgets={zone?.[s]?.[a]?.widgets}
+                align={zone?.[s]?.[a]?.align}
+                padding={zone?.[s]?.[a]?.padding}
+                backgroundColor={zone?.[s]?.[a]?.background}
+                gap={zone?.[s]?.[a]?.gap}
+                centered={zone?.[s]?.[a]?.centered}
+                layoutConstraint={layoutConstraint}
+                built={built}
+                renderWidget={renderWidget}
+                onWidgetAreaSelect={onWidgetAreaSelect}
+              />
+            ),
+          )}
+        </GridSection>
+      ))}
+    </>
+  );
+}
diff --git a/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/hooks.ts b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/hooks.ts
new file mode 100644
index 0000000000..123614863b
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/hooks.ts
@@ -0,0 +1,41 @@
+import { useCallback } from "react";
+
+import { getLocationFromId } from "./Area";
+import type { Location, Alignment } from "./types";
+
+export default function ({
+  onWidgetLayoutUpdate: onWidgetLayoutUpdate,
+  onAlignmentUpdate: onAlignmentUpdate,
+}: {
+  onWidgetLayoutUpdate?: (
+    id: string,
+    update: { location?: Location; extended?: boolean; index?: number },
+  ) => void;
+  onAlignmentUpdate?: (location: Location, align: Alignment) => void;
+}) {
+  const handleMove = useCallback(
+    (id: string, area: string, index: number, prevArea: string, _prevIndex: number) => {
+      const location = area !== prevArea ? getLocationFromId(area) : undefined;
+      onWidgetLayoutUpdate?.(id, { index, location });
+    },
+    [onWidgetLayoutUpdate],
+  );
+
+  const handleExtend = useCallback(
+    (id: string, extended: boolean) => {
+      onWidgetLayoutUpdate?.(id, { extended });
+    },
+    [onWidgetLayoutUpdate],
+  );
+
+  const handleAlignmentChange = useCallback(
+    (id: string, a: Alignment) => {
+      const l = getLocationFromId(id);
+      if (!l) return;
+      onAlignmentUpdate?.(l, a);
+    },
+    [onAlignmentUpdate],
+  );
+
+  return { handleMove, handleExtend, handleAlignmentChange };
+}
diff --git a/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/index.tsx b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/index.tsx
new file mode 100644
index 0000000000..a1441313cb
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/index.tsx
@@ -0,0 +1,127 @@
+import React, { ReactNode, useMemo } from "react";
+import { GridWrapper } from "react-align";
+
+import { styled } from "@reearth/services/theme";
+
+import useHooks from "./hooks";
+import MobileZone from "./MobileZone";
+import type {
+  WidgetAlignSystem as WidgetAlignSystemType,
+  Alignment,
+  Location,
+  WidgetLayoutConstraint,
+  Theme,
+  WidgetProps,
+} from "./types";
+import { filterSections } from "./utils";
+import ZoneComponent, { WidgetAreaType } from "./Zone";
+
+export type { WidgetAreaType };
+
+export type {
+  WidgetAlignSystem,
+  WidgetLayout,
+  Location,
+  Alignment,
+  WidgetArea,
+  WidgetSection,
+  WidgetZone,
+  WidgetLayoutConstraint,
+  Theme,
+  WidgetProps,
+  InternalWidget,
+} from "./types";
+
+export type Props = {
+  alignSystem?: WidgetAlignSystemType;
+  selectedWidgetArea?: WidgetAreaType;
+  invisibleWidgetIDs?: string[];
+  editing?: boolean;
+  built?: boolean;
+  layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  isMobile?: boolean;
+  theme?: Theme;
+  renderWidget?: (props: WidgetProps) => ReactNode;
+  onWidgetLayoutUpdate?: (
+    id: string,
+    update: {
+      location?: Location;
+      extended?: boolean;
+      index?: number;
+    },
+  ) => void;
+  onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
+  onAlignmentUpdate?: (location: Location, align: Alignment) => void;
+};
+
+const WidgetAlignSystem: React.FC<Props> = ({
+  alignSystem,
+  selectedWidgetArea,
+  invisibleWidgetIDs,
+  editing,
+  built,
+  isMobile,
+  layoutConstraint,
+  theme,
+  renderWidget,
+  onWidgetAreaSelect,
+  onWidgetLayoutUpdate: onWidgetLayoutUpdate,
+  onAlignmentUpdate: onAlignmentUpdate,
+}) => {
+  const { handleMove, handleExtend, handleAlignmentChange } = useHooks({
+    onWidgetLayoutUpdate,
+    onAlignmentUpdate,
+  });
+  const Zone = isMobile ? MobileZone : ZoneComponent;
+
+  const hasInner = useMemo(() => {
+    if (!alignSystem?.inner) {
+      return;
+    }
+    return !!filterSections(alignSystem?.inner, invisibleWidgetIDs).length;
+  }, [alignSystem, invisibleWidgetIDs]);
+
+  return (
+    <WidetAlignSystemWrapper editorMode={editing}>
+      <GridWrapper
+        editing={editing}
+        onMove={handleMove}
+        onAlignChange={handleAlignmentChange}
+        onExtend={handleExtend}>
+        <Zone
+          zoneName="outer"
+          selectedWidgetArea={selectedWidgetArea}
+          zone={alignSystem?.outer}
+          layoutConstraint={layoutConstraint}
+          invisibleWidgetIDs={invisibleWidgetIDs}
+          theme={theme}
+          built={built}
+          renderWidget={renderWidget}
+          onWidgetAreaSelect={onWidgetAreaSelect}>
+          {(!isMobile || hasInner) && (
+            <ZoneComponent
+              zoneName="inner"
+              selectedWidgetArea={selectedWidgetArea}
+              invisibleWidgetIDs={invisibleWidgetIDs}
+              zone={alignSystem?.inner}
+              layoutConstraint={layoutConstraint}
+              built={built}
+              renderWidget={renderWidget}
+              onWidgetAreaSelect={onWidgetAreaSelect}
+            />
+          )}
+        </Zone>
+      </GridWrapper>
+    </WidetAlignSystemWrapper>
+  );
+};
+
+export default WidgetAlignSystem;
+
+const WidetAlignSystemWrapper = styled.div<{ editorMode?: boolean }>`
+  width: 100%;
+  height: 100%;
+  z-index: ${({ theme }) => theme.zIndexes.base};
+  position: absolute;
+  pointer-events: ${({ editorMode }) => (editorMode ? "auto" : "none")};
+`;
diff --git a/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/types.ts b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/types.ts
new file mode 100644
index 0000000000..972f32618c
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/types.ts
@@ -0,0 +1,61 @@
+import { Alignment } from "react-align";
+
+import type { InternalWidget, WidgetAlignment, WidgetLocation } from "../types";
+
+export type { Alignment } from "react-align";
+
+export type { Theme, Widget, InternalWidget, WidgetAlignment, WidgetLocation } from "../types";
+
+export type Location = {
+  zone: "inner" | "outer";
+  section: "left" | "center" | "right";
+  area: "top" | "middle" | "bottom";
+};
+
+export type WidgetAreaPadding = { top: number; bottom: number; left: number; right: number };
+
+export type WidgetArea = {
+  align?: Alignment;
+  padding?: WidgetAreaPadding;
+  widgets?: InternalWidget[];
+  gap?: number;
+  centered?: boolean;
+  background?: string;
+};
+
+export type WidgetSection = {
+  top?: WidgetArea;
+  middle?: WidgetArea;
+  bottom?: WidgetArea;
+};
+
+export type WidgetZone = {
+  left?: WidgetSection;
+  center?: WidgetSection;
+  right?: WidgetSection;
+};
+
+export type WidgetAlignSystem = {
+  outer?: WidgetZone;
+  inner?: WidgetZone;
+};
+
+export type WidgetLayout = {
+  location: WidgetLocation;
+  align?: WidgetAlignment;
+};
+
+export type WidgetLayoutConstraint = {
+  extendable?: {
+    horizontally?: boolean;
+    vertically?: boolean;
+  };
+};
+
+export type WidgetProps = {
+  widget: InternalWidget;
+  layout?: WidgetLayout;
+  extended?: boolean;
+  editing: boolean;
+  onExtend?: (id: string, extended: boolean | undefined) => void;
+};
diff --git a/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/utils.ts b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/utils.ts
new file mode 100644
index 0000000000..e73aee74ab
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/WidgetAlignSystem/utils.ts
@@ -0,0 +1,16 @@
+import { WidgetZone } from "./types";
+
+const sections = ["left", "center", "right"] as const;
+const areas = ["top", "middle", "bottom"] as const;
+
+export const filterSections = (
+  zone?: WidgetZone,
+  invisibleWidgetIDs?: string[],
+  cb?: (s: (typeof sections)[number]) => void,
+) => {
+  return sections.filter(
+    s =>
+      areas.filter(a => zone?.[s]?.[a]?.widgets?.find(w => !invisibleWidgetIDs?.includes(w.id)))
+        .length || cb?.(s),
+  );
+};
diff --git a/web/src/beta/core/Crust/Widgets/index.stories.tsx b/web/src/beta/core/Crust/Widgets/index.stories.tsx
new file mode 100644
index 0000000000..306e7055b6
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/index.stories.tsx
@@ -0,0 +1,59 @@
+import { Meta, Story } from "@storybook/react";
+
+import { contextEvents } from "./Widget/storybook";
+
+import Component, { Props } from ".";
+
+export default {
+  component: Component,
+  argTypes: {
+    context: { control: false },
+  },
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => (
+  <div style={{ width: "100%", height: "100%" }}>
+    <Component {...args} />
+  </div>
+);
+
+export const Default = Template.bind({});
+
+Default.args = {
+  alignSystem: {
+    inner: {
+      center: {
+        top: {
+          align: "centered",
+          widgets: [
+            {
+              id: "w",
+              pluginId: "reearth",
+              extensionId: "button",
+              property: {
+                default: {
+                  buttonTitle: "Button 1",
+                  buttonColor: "white",
+                  buttonBgcolor: "red",
+                },
+              },
+            },
+            {
+              id: "unknown",
+              pluginId: "unknown",
+              extensionId: "unknown",
+            },
+          ],
+        },
+      },
+    },
+  },
+  context: {
+    ...contextEvents,
+  },
+  editing: false,
+  isBuilt: false,
+  isEditable: false,
+  renderWidget: ({ widget }) => <p>{widget.id}</p>,
+};
diff --git a/web/src/beta/core/Crust/Widgets/index.tsx b/web/src/beta/core/Crust/Widgets/index.tsx
new file mode 100644
index 0000000000..7e20e0f4d8
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/index.tsx
@@ -0,0 +1,155 @@
+import { Fragment, ReactNode, useCallback } from "react";
+
+import type { InternalWidget, Theme, Widget, WidgetLayout, WidgetLocationOptions } from "./types";
+import useWidgetAlignSystem from "./useWidgetAlignSystem";
+import WidgetComponent, { type Context } from "./Widget";
+import WidgetAlignSystem, {
+  WidgetAreaType,
+  type Alignment,
+  type Location,
+  type WidgetAlignSystem as WidgetAlignSystemType,
+  type WidgetLayoutConstraint,
+  type WidgetProps as WasWidgetProps,
+} from "./WidgetAlignSystem";
+
+export type {
+  Alignment,
+  Location,
+  WidgetAlignSystem,
+  WidgetLayoutConstraint,
+  WidgetArea,
+  WidgetZone,
+  WidgetSection,
+  WidgetAreaType,
+} from "./WidgetAlignSystem";
+
+export type { Context, BuiltinWidgets } from "./Widget";
+export { isBuiltinWidget } from "./Widget";
+
+export type { Widget, InternalWidget, WidgetLocationOptions, WidgetAlignment } from "./types";
+
+export type Props = {
+  alignSystem?: WidgetAlignSystemType;
+  floatingWidgets?: InternalWidget[];
+  selectedWidgetArea?: WidgetAreaType;
+  layoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  editing?: boolean;
+  isMobile?: boolean;
+  theme?: Theme;
+  isEditable?: boolean;
+  inEditor?: boolean;
+  isBuilt?: boolean;
+  context?: Context;
+  renderWidget?: (props: WidgetProps) => ReactNode;
+  onWidgetLayoutUpdate?: (
+    id: string,
+    update: {
+      location?: Location;
+      extended?: boolean;
+      index?: number;
+    },
+  ) => void;
+  onAlignmentUpdate?: (location: Location, align: Alignment) => void;
+  onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
+};
+
+export type WidgetProps = {
+  widget: Widget;
+  editing: boolean;
+  extended?: boolean;
+  layout?: WidgetLayout;
+  onExtend?: (id: string, extended: boolean | undefined) => void;
+  onWidgetMove?: (widgetId: string, options: WidgetLocationOptions) => void;
+  onVisibilityChange: (widgetId: string, v: boolean) => void;
+};
+
+export default function Widgets({
+  alignSystem,
+  floatingWidgets,
+  selectedWidgetArea,
+  editing,
+  isMobile,
+  layoutConstraint,
+  theme,
+  isEditable,
+  inEditor,
+  isBuilt,
+  context,
+  renderWidget,
+  onAlignmentUpdate,
+  onWidgetLayoutUpdate,
+  onWidgetAreaSelect,
+}: Props): JSX.Element | null {
+  const { overriddenAlignSystem, moveWidget, onVisibilityChange, invisibleWidgetIDs } =
+    useWidgetAlignSystem({
+      alignSystem,
+    });
+
+  const renderWidgetInternal = useCallback(
+    ({ editing, extended, layout, widget, onExtend }: WasWidgetProps) => (
+      <WidgetComponent
+        widget={widget}
+        editing={editing}
+        extended={extended}
+        layout={layout}
+        theme={theme}
+        isEditable={isEditable}
+        inEditor={inEditor}
+        isBuilt={isBuilt}
+        isMobile={isMobile}
+        context={context}
+        renderWidget={widget2 =>
+          renderWidget?.({
+            widget: widget2,
+            editing,
+            extended,
+            layout,
+            onExtend,
+            onWidgetMove: moveWidget,
+            onVisibilityChange,
+          })
+        }
+        onVisibilityChange={onVisibilityChange}
+        onExtend={onExtend}
+      />
+    ),
+    [
+      theme,
+      isEditable,
+      inEditor,
+      isBuilt,
+      isMobile,
+      context,
+      onVisibilityChange,
+      renderWidget,
+      moveWidget,
+    ],
+  );
+
+  return (
+    <>
+      <WidgetAlignSystem
+        alignSystem={overriddenAlignSystem}
+        selectedWidgetArea={selectedWidgetArea}
+        invisibleWidgetIDs={invisibleWidgetIDs}
+        editing={editing}
+        built={isBuilt}
+        isMobile={isMobile}
+        layoutConstraint={layoutConstraint}
+        theme={theme}
+        renderWidget={renderWidgetInternal}
+        onAlignmentUpdate={onAlignmentUpdate}
+        onWidgetLayoutUpdate={onWidgetLayoutUpdate}
+        onWidgetAreaSelect={onWidgetAreaSelect}
+      />
+      {floatingWidgets?.map(w => (
+        <Fragment key={w.id}>
+          {renderWidgetInternal({
+            widget: w,
+            editing: false,
+          })}
+        </Fragment>
+      ))}
+    </>
+  );
+}
diff --git a/web/src/beta/core/Crust/Widgets/types.ts b/web/src/beta/core/Crust/Widgets/types.ts
new file mode 100644
index 0000000000..21c9c37ca6
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/types.ts
@@ -0,0 +1,35 @@
+export type { Camera, FlyToDestination, LookAtDestination, Theme, Clock } from "../types";
+
+export type InternalWidget<P = any> = Omit<Widget<P>, "layout" | "extended"> & {
+  extended?: boolean;
+};
+
+export type Widget<P = any> = {
+  id: string;
+  pluginId?: string;
+  extensionId?: string;
+  property?: P;
+  propertyId?: string;
+  extended?: {
+    horizontally: boolean;
+    vertically: boolean;
+  };
+  layout?: WidgetLayout;
+};
+
+export type WidgetLayout = {
+  location: WidgetLocation;
+  align?: WidgetAlignment;
+};
+
+export type WidgetLocation = {
+  zone: "inner" | "outer";
+  section: "left" | "center" | "right";
+  area: "top" | "middle" | "bottom";
+};
+
+export type WidgetAlignment = "start" | "centered" | "end";
+
+export type WidgetLocationOptions = WidgetLocation & {
+  method?: "insert" | "append";
+};
diff --git a/web/src/beta/core/Crust/Widgets/useWidgetAlignSystem.ts b/web/src/beta/core/Crust/Widgets/useWidgetAlignSystem.ts
new file mode 100644
index 0000000000..82618a16a1
--- /dev/null
+++ b/web/src/beta/core/Crust/Widgets/useWidgetAlignSystem.ts
@@ -0,0 +1,139 @@
+import { useEffect, useState, useCallback } from "react";
+
+import type {
+  WidgetAlignSystem,
+  InternalWidget,
+  WidgetLocationOptions,
+  WidgetArea,
+  WidgetSection,
+  WidgetZone,
+} from ".";
+
+export default ({ alignSystem }: { alignSystem: WidgetAlignSystem | undefined }) => {
+  const [overriddenAlignSystem, setOverrideAlignSystem] = useState<WidgetAlignSystem | undefined>(
+    alignSystem,
+  );
+
+  // NOTE: This is invisible list of widget.
+  //       The reason why we use invisible list is prevent initializing cost.
+  const [invisibleWidgetIDs, setInvisibleWidgetIDs] = useState<string[]>([]);
+
+  const onVisibilityChange = useCallback((widgetId: string, v: boolean) => {
+    setInvisibleWidgetIDs(a => {
+      if (!a.includes(widgetId) && !v) {
+        return [...a, widgetId];
+      }
+      if (a.includes(widgetId) && v) {
+        return a.filter(i => i !== widgetId);
+      }
+      return a;
+    });
+  }, []);
+
+  const moveWidget = useCallback((widgetId: string, options: WidgetLocationOptions) => {
+    if (
+      !["outer", "inner"].includes(options.zone) ||
+      !["left", "center", "right"].includes(options.section) ||
+      !["top", "middle", "bottom"].includes(options.area) ||
+      (options.section === "center" && options.area === "middle")
+    )
+      return;
+
+    let widget: InternalWidget | undefined;
+
+    setOverrideAlignSystem(alignSystem => {
+      if (!alignSystem) return alignSystem;
+      Object.keys(alignSystem).forEach(zoneName_ => {
+        const zoneName = zoneName_ as keyof WidgetAlignSystem;
+        const zone = alignSystem[zoneName];
+        if (zone) {
+          Object.keys(zone).forEach(sectionName_ => {
+            const sectionName = sectionName_ as keyof WidgetZone;
+            const section = zone[sectionName];
+            if (section) {
+              Object.keys(section).forEach(areaName_ => {
+                const areaName = areaName_ as keyof WidgetSection;
+                const area = section[areaName];
+                if (!widget && area?.widgets) {
+                  const sourceIndex = area.widgets.findIndex(w => w.id === widgetId);
+                  if (sourceIndex !== -1) {
+                    [widget] = area.widgets.splice(sourceIndex, 1);
+                  }
+                }
+              });
+            }
+          });
+        }
+      });
+      return { ...alignSystem };
+    });
+
+    setTimeout(() => {
+      setOverrideAlignSystem(alignSystem => {
+        if (!alignSystem || !widget) return alignSystem;
+        if (!alignSystem[options.zone]) {
+          alignSystem[options.zone] = {
+            left: undefined,
+            center: undefined,
+            right: undefined,
+          };
+        }
+
+        const targetZone = alignSystem[options.zone] as WidgetZone;
+        if (!targetZone[options.section]) {
+          targetZone[options.section] = {
+            top: undefined,
+            middle: undefined,
+            bottom: undefined,
+          };
+        }
+
+        const targetSection = targetZone[options.section] as WidgetSection;
+        if (!targetSection[options.area]) {
+          targetSection[options.area] = {
+            align: "start",
+            widgets: [],
+          };
+        }
+
+        const targetArea = targetSection[options.area] as WidgetArea;
+        if (!targetArea.widgets) targetArea.widgets = [];
+        if (options.method === "insert") {
+          targetArea.widgets.unshift(widget);
+        } else {
+          targetArea.widgets.push(widget);
+        }
+
+        if (targetArea.widgets.length) {
+          const next = {
+            ...alignSystem,
+            [options.zone]: {
+              ...alignSystem[options.zone],
+              [options.section]: {
+                ...(alignSystem[options.zone]?.[options.section] || {}),
+                [options.area]: {
+                  ...(alignSystem[options.zone]?.[options.section]?.[options.area] || {}),
+                  widgets: [...targetArea.widgets],
+                },
+              },
+            },
+          };
+          return { ...next };
+        }
+
+        return alignSystem;
+      });
+    }, 0);
+  }, []);
+
+  useEffect(() => {
+    setOverrideAlignSystem(alignSystem);
+  }, [alignSystem]);
+
+  return {
+    overriddenAlignSystem,
+    moveWidget,
+    invisibleWidgetIDs,
+    onVisibilityChange,
+  };
+};
diff --git a/web/src/beta/core/Crust/context.ts b/web/src/beta/core/Crust/context.ts
new file mode 100644
index 0000000000..c04274bdc0
--- /dev/null
+++ b/web/src/beta/core/Crust/context.ts
@@ -0,0 +1,81 @@
+import { RefObject, useMemo } from "react";
+
+import { Camera, Clock, MapRef, SceneProperty } from "./types";
+import { Context as WidgetContext } from "./Widgets";
+
+export const useWidgetContext = ({
+  mapRef,
+  camera,
+  selectedLayerId,
+  sceneProperty,
+  overriddenClock,
+}: Parameters<typeof widgetContextFromMapRef>[0]) =>
+  useMemo(
+    () =>
+      widgetContextFromMapRef({
+        mapRef,
+        camera,
+        selectedLayerId,
+        sceneProperty,
+        overriddenClock,
+      }),
+    [camera, mapRef, sceneProperty, selectedLayerId, overriddenClock],
+  );
+
+export function widgetContextFromMapRef({
+  mapRef,
+  camera,
+  selectedLayerId,
+  sceneProperty,
+  overriddenClock,
+}: {
+  mapRef?: RefObject<MapRef>;
+  camera?: Camera;
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  sceneProperty?: SceneProperty;
+  overriddenClock: Clock;
+}): WidgetContext {
+  const engine = () => mapRef?.current?.engine;
+  const layers = () => mapRef?.current?.layers;
+
+  return {
+    camera,
+    get clock() {
+      return engine()?.getClock();
+    },
+    overriddenClock,
+    initialCamera: sceneProperty?.default?.camera,
+    is2d: sceneProperty?.default?.sceneMode === "2d",
+    selectedLayerId,
+    findPhotooverlayLayer: (id: string) => {
+      const l = layers()?.findById(id);
+      if (!l || l.type !== "simple") {
+        return undefined;
+      }
+      // For compat
+      const location = l.property?.default?.location ?? l.property?.default?.position;
+      return {
+        title: l.title,
+        lat: location?.lat,
+        lng: location?.lng,
+        height: location?.height ?? 0,
+      };
+    },
+    onCameraOrbit: (...args) => engine()?.orbit(...args),
+    onCameraRotateRight: (...args) => engine()?.rotateRight(...args),
+    onFlyTo: (...args) => engine()?.flyTo(...args),
+    onLookAt: (...args) => engine()?.lookAt(...args),
+    onLayerSelect: (...args) => layers()?.select(...args),
+    onPause: (...args) => engine()?.pause(...args),
+    onPlay: (...args) => engine()?.play(...args),
+    onSpeedChange: (...args) => engine()?.changeSpeed(...args),
+    onTick: (...args) => engine()?.onTick(...args),
+    removeTickEventListener: (...args) => engine()?.removeTickEventListener(...args),
+    onTimeChange: (...args) => engine()?.changeTime(...args),
+    onZoomIn: (...args) => engine()?.zoomIn(...args),
+    onZoomOut: (...args) => engine()?.zoomOut(...args),
+  };
+}
diff --git a/web/src/beta/core/Crust/hooks.tsx b/web/src/beta/core/Crust/hooks.tsx
new file mode 100644
index 0000000000..a8e443d56e
--- /dev/null
+++ b/web/src/beta/core/Crust/hooks.tsx
@@ -0,0 +1,153 @@
+import type CSS from "csstype";
+import {
+  type FC,
+  type ReactNode,
+  type RefObject,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import type { BlockProps } from "./Infobox";
+import {
+  Plugin,
+  type CommonPluginProps,
+  type PluginProps,
+  type PluginModalInfo,
+  type PluginPopupInfo,
+  type ExternalPluginProps,
+} from "./Plugins";
+import type { MapRef } from "./types";
+import type { WidgetProps } from "./Widgets";
+
+export default function useHook({
+  mapRef,
+  pluginBaseUrl,
+  pluginProperty,
+}: { mapRef?: RefObject<MapRef> } & ExternalPluginProps) {
+  const [shownPluginModalInfo, onPluginModalShow] = useState<PluginModalInfo>();
+  const pluginModalContainerRef = useRef<HTMLDivElement>();
+
+  const [shownPluginPopupInfo, onPluginPopupShow] = useState<PluginPopupInfo>();
+  const pluginPopupContainerRef = useRef<HTMLDivElement>();
+
+  const commonPluginProps = useMemo(
+    () => ({
+      pluginModalContainer: pluginModalContainerRef.current,
+      shownPluginModalInfo: shownPluginModalInfo,
+      onPluginModalShow: onPluginModalShow,
+      pluginPopupContainer: pluginPopupContainerRef.current,
+      shownPluginPopupInfo: shownPluginPopupInfo,
+      onPluginPopupShow: onPluginPopupShow,
+      pluginBaseUrl,
+      pluginProperty,
+      property: pluginProperty,
+    }),
+    [
+      shownPluginModalInfo,
+      onPluginModalShow,
+      shownPluginPopupInfo,
+      onPluginPopupShow,
+      pluginBaseUrl,
+      pluginProperty,
+    ],
+  );
+
+  const renderWidget = useCallback(
+    (widgetProps: WidgetProps): ReactNode => (
+      <Widget widgetProps={widgetProps} commonPluginProps={commonPluginProps} mapRef={mapRef} />
+    ),
+    [mapRef, commonPluginProps],
+  );
+  const renderBlock = useCallback(
+    (blockProps: BlockProps): ReactNode => (
+      <Block blockProps={blockProps} commonPluginProps={commonPluginProps} />
+    ),
+    [commonPluginProps],
+  );
+
+  return {
+    renderWidget,
+    renderBlock,
+
+    // For Modal
+    shownPluginModalInfo,
+    onPluginModalShow,
+    pluginModalContainerRef,
+
+    // For Popup
+    shownPluginPopupInfo,
+    onPluginPopupShow,
+    pluginPopupContainerRef,
+  };
+}
+
+const Widget: FC<{
+  mapRef?: RefObject<MapRef>;
+  commonPluginProps: CommonPluginProps;
+  widgetProps: WidgetProps;
+}> = ({ mapRef, commonPluginProps, widgetProps }) => {
+  const widget = widgetProps.widget;
+  const autoResize = widget?.extended?.vertically
+    ? "width-only"
+    : widget?.extended?.horizontally
+    ? "height-only"
+    : "both";
+
+  const onExtend = widgetProps.onExtend;
+  const handleOnRender = useCallback<NonNullable<PluginProps["onRender"]>>(
+    options => {
+      onExtend?.(widget.id, options?.extended);
+    },
+    [onExtend, widget.id],
+  );
+  const handleOnResize = useCallback<NonNullable<PluginProps["onResize"]>>(
+    (_width, _height, extended) => {
+      onExtend?.(widget.id, extended);
+    },
+    [onExtend, widget.id],
+  );
+  const iframeProps = useMemo<{ style: CSS.Properties }>(
+    () => ({
+      style: { pointerEvents: widgetProps.editing ? "none" : "auto" },
+    }),
+    [widgetProps.editing],
+  );
+  return (
+    <Plugin
+      mapRef={mapRef}
+      autoResize={autoResize}
+      pluginId={widget.pluginId}
+      extensionId={widget.extensionId}
+      sourceCode={(widget as any)?.__REEARTH_SOURCECODE} // for debugging
+      extensionType="widget"
+      visible
+      iFrameProps={iframeProps}
+      onRender={handleOnRender}
+      onResize={handleOnResize}
+      {...commonPluginProps}
+      {...widgetProps}
+    />
+  );
+};
+
+const Block: FC<{
+  commonPluginProps: CommonPluginProps;
+  blockProps: BlockProps;
+}> = ({ commonPluginProps, blockProps }) => {
+  return (
+    <Plugin
+      autoResize="height-only"
+      pluginId={blockProps.block?.pluginId}
+      extensionId={blockProps.block?.extensionId}
+      sourceCode={(blockProps.block as any)?.__REEARTH_SOURCECODE} // for debugging
+      extensionType="block"
+      visible
+      layer={blockProps.layer}
+      block={blockProps.block}
+      onClick={blockProps.onClick}
+      {...commonPluginProps}
+    />
+  );
+};
diff --git a/web/src/beta/core/Crust/index.stories.tsx b/web/src/beta/core/Crust/index.stories.tsx
new file mode 100644
index 0000000000..49e831bd42
--- /dev/null
+++ b/web/src/beta/core/Crust/index.stories.tsx
@@ -0,0 +1,30 @@
+import { Meta, Story } from "@storybook/react";
+import { useRef } from "react";
+
+import { engine } from "../engines/Cesium";
+import Map, { Engine } from "../Map";
+
+import { MapRef } from "./types";
+
+import Component, { Props } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props & { engine: Engine }> = args => {
+  const ref = useRef<MapRef>(null);
+  return (
+    <>
+      <Map engine="a" engines={{ a: engine }} ref={ref} />
+      <Component {...args} mapRef={ref} />
+    </>
+  );
+};
+
+export const Cesium = Template.bind({});
+
+Cesium.args = {
+  engine: engine,
+};
diff --git a/web/src/beta/core/Crust/index.tsx b/web/src/beta/core/Crust/index.tsx
new file mode 100644
index 0000000000..03c4f52160
--- /dev/null
+++ b/web/src/beta/core/Crust/index.tsx
@@ -0,0 +1,240 @@
+import type { ReactNode, RefObject } from "react";
+
+import type { SelectedFeatureInfo, Tag } from "@reearth/beta/core/mantle";
+
+import type { ComputedFeature, ComputedLayer, Feature } from "../mantle";
+import type { Clock, LayerEditEvent, LayerSelectionReason } from "../Map";
+import type { Viewport } from "../Visualizer";
+
+import { useWidgetContext } from "./context";
+import useHooks from "./hooks";
+import Infobox, { Block, InfoboxProperty } from "./Infobox";
+import Plugins, { type ExternalPluginProps, ModalContainer, PopupContainer } from "./Plugins";
+import { usePublishTheme } from "./theme";
+import type { ValueTypes, ValueType, MapRef, SceneProperty, Camera } from "./types";
+import Widgets, {
+  type WidgetAlignSystem as WidgetAlignSystemType,
+  type Alignment,
+  type Location,
+  type WidgetLayoutConstraint,
+  type InternalWidget,
+  type WidgetAreaType,
+} from "./Widgets";
+
+export type { ValueTypes, ValueType } from "./types";
+
+export type { Block } from "./Infobox";
+
+export type { ExternalPluginProps } from "./Plugins";
+
+export type {
+  Context,
+  WidgetLayoutConstraint,
+  WidgetAlignSystem,
+  Alignment,
+  Location,
+  InternalWidget,
+  WidgetZone,
+  WidgetSection,
+  BuiltinWidgets,
+  WidgetArea,
+  WidgetAlignment,
+  WidgetAreaType,
+} from "./Widgets";
+export { isBuiltinWidget } from "./Widgets";
+
+export type Props = {
+  // common
+  engineName?: string;
+  isEditable?: boolean;
+  inEditor?: boolean;
+  isBuilt?: boolean;
+  isMobile?: boolean;
+  mapRef?: RefObject<MapRef>;
+  sceneProperty?: SceneProperty;
+  overriddenClock: Clock;
+  viewport?: Viewport;
+  camera?: Camera;
+  selectedComputedLayer?: ComputedLayer;
+  selectedComputedFeature?: ComputedFeature;
+  selectedFeature?: Feature;
+  selectedReason?: LayerSelectionReason;
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  selectedFeatureInfo?: SelectedFeatureInfo;
+  tags?: Tag[];
+  // widgets
+  widgetAlignSystem?: WidgetAlignSystemType;
+  widgetAlignSystemEditing?: boolean;
+  widgetLayoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  floatingWidgets?: InternalWidget[];
+  // infobox
+  infoboxProperty?: InfoboxProperty;
+  blocks?: Block[];
+  infoboxTitle?: string;
+  selectedBlockId?: string;
+  showInfoboxTitle?: boolean;
+  selectedWidgetArea?: WidgetAreaType;
+  infoboxVisible?: boolean;
+  // plugin
+  externalPlugin: ExternalPluginProps;
+  useExperimentalSandbox?: boolean;
+  // widget events
+  onWidgetLayoutUpdate?: (
+    id: string,
+    update: {
+      location?: Location;
+      extended?: boolean;
+      index?: number;
+    },
+  ) => void;
+  onWidgetAlignmentUpdate?: (location: Location, align: Alignment) => void;
+  onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
+  // infobox events
+  onInfoboxMaskClick?: () => void;
+  onInfoboxClose?: () => void;
+  onBlockSelect?: (id?: string) => void;
+  onBlockChange?: <T extends ValueType>(
+    blockId: string,
+    schemaItemId: string,
+    fieldId: string,
+    value: ValueTypes[T],
+    type: T,
+  ) => void;
+  onBlockMove?: (id: string, fromIndex: number, toIndex: number) => void;
+  onBlockDelete?: (id: string) => void;
+  onBlockInsert?: (bi: number, i: number, pos?: "top" | "bottom") => void;
+  renderInfoboxInsertionPopup?: (onSelect: (bi: number) => void, onClose: () => void) => ReactNode;
+  overrideSceneProperty: (pluginId: string, property: SceneProperty) => void;
+  onLayerEdit: (cb: (e: LayerEditEvent) => void) => void;
+};
+
+export default function Crust({
+  engineName,
+  isBuilt,
+  isEditable,
+  inEditor,
+  isMobile,
+  mapRef,
+  sceneProperty,
+  overriddenClock,
+  viewport,
+  camera,
+  tags,
+  selectedLayerId,
+  selectedReason,
+  selectedComputedLayer,
+  selectedComputedFeature,
+  selectedFeatureInfo,
+  widgetAlignSystem,
+  widgetAlignSystemEditing,
+  widgetLayoutConstraint,
+  floatingWidgets,
+  blocks,
+  infoboxProperty,
+  infoboxTitle,
+  infoboxVisible,
+  selectedBlockId,
+  selectedWidgetArea,
+  externalPlugin,
+  useExperimentalSandbox,
+  onWidgetLayoutUpdate,
+  onWidgetAlignmentUpdate,
+  onWidgetAreaSelect,
+  onInfoboxMaskClick,
+  onInfoboxClose,
+  onBlockSelect,
+  onBlockChange,
+  onBlockMove,
+  onBlockDelete,
+  onBlockInsert,
+  renderInfoboxInsertionPopup,
+  overrideSceneProperty,
+  onLayerEdit,
+}: Props): JSX.Element | null {
+  const {
+    renderBlock,
+    renderWidget,
+    shownPluginModalInfo,
+    shownPluginPopupInfo,
+    onPluginModalShow,
+    pluginModalContainerRef,
+    pluginPopupContainerRef,
+  } = useHooks({ mapRef, ...externalPlugin });
+  const theme = usePublishTheme(sceneProperty?.theme);
+  const widgetContext = useWidgetContext({
+    mapRef,
+    camera,
+    sceneProperty,
+    selectedLayerId,
+    overriddenClock,
+  });
+
+  return (
+    <Plugins
+      engineName={engineName}
+      mapRef={mapRef}
+      sceneProperty={sceneProperty}
+      built={isBuilt}
+      inEditor={inEditor}
+      tags={tags}
+      selectedLayer={selectedComputedLayer}
+      selectedFeature={selectedComputedFeature}
+      selectedFeatureInfo={selectedFeatureInfo}
+      layerSelectionReason={selectedReason}
+      viewport={viewport}
+      alignSystem={widgetAlignSystem}
+      floatingWidgets={floatingWidgets}
+      camera={camera}
+      useExperimentalSandbox={useExperimentalSandbox}
+      overrideSceneProperty={overrideSceneProperty}
+      onLayerEdit={onLayerEdit}>
+      <ModalContainer
+        shownPluginModalInfo={shownPluginModalInfo}
+        onPluginModalShow={onPluginModalShow}
+        ref={pluginModalContainerRef}
+      />
+      <PopupContainer shownPluginPopupInfo={shownPluginPopupInfo} ref={pluginPopupContainerRef} />
+      <Widgets
+        isMobile={isMobile}
+        isBuilt={isBuilt}
+        isEditable={isEditable}
+        inEditor={inEditor}
+        alignSystem={widgetAlignSystem}
+        floatingWidgets={floatingWidgets}
+        selectedWidgetArea={selectedWidgetArea}
+        editing={widgetAlignSystemEditing}
+        layoutConstraint={widgetLayoutConstraint}
+        theme={theme}
+        context={widgetContext}
+        onWidgetLayoutUpdate={onWidgetLayoutUpdate}
+        onAlignmentUpdate={onWidgetAlignmentUpdate}
+        onWidgetAreaSelect={onWidgetAreaSelect}
+        renderWidget={renderWidget}
+      />
+      <Infobox
+        isBuilt={isBuilt}
+        isEditable={isEditable}
+        blocks={blocks}
+        infoboxKey={selectedLayerId?.layerId}
+        property={infoboxProperty}
+        title={infoboxTitle}
+        visible={infoboxVisible}
+        selectedBlockId={selectedBlockId}
+        theme={theme}
+        layer={selectedComputedLayer?.layer}
+        onMaskClick={onInfoboxMaskClick}
+        onBlockSelect={onBlockSelect}
+        onBlockChange={onBlockChange}
+        onBlockDelete={onBlockDelete}
+        onBlockMove={onBlockMove}
+        onBlockInsert={onBlockInsert}
+        renderBlock={renderBlock}
+        renderInsertionPopup={renderInfoboxInsertionPopup}
+        onClose={onInfoboxClose}
+      />
+    </Plugins>
+  );
+}
diff --git a/web/src/beta/core/Crust/theme/dark.ts b/web/src/beta/core/Crust/theme/dark.ts
new file mode 100644
index 0000000000..c9f8000c7e
--- /dev/null
+++ b/web/src/beta/core/Crust/theme/dark.ts
@@ -0,0 +1,15 @@
+import { colors } from "@reearth/services/theme";
+
+import type { Theme } from ".";
+
+export const dark: Theme = {
+  strongText: colors.publish.dark.text.strong,
+  mainText: colors.publish.dark.text.main,
+  weakText: colors.publish.dark.text.weak,
+  strongIcon: colors.publish.dark.icon.strong,
+  mainIcon: colors.publish.dark.icon.main,
+  weakIcon: colors.publish.dark.icon.weak,
+  select: colors.publish.dark.other.select,
+  mask: colors.publish.dark.other.mask,
+  background: colors.publish.dark.other.background,
+};
diff --git a/web/src/beta/core/Crust/theme/forest.ts b/web/src/beta/core/Crust/theme/forest.ts
new file mode 100644
index 0000000000..b391bbd069
--- /dev/null
+++ b/web/src/beta/core/Crust/theme/forest.ts
@@ -0,0 +1,15 @@
+import { colors } from "@reearth/services/theme";
+
+import type { Theme } from ".";
+
+export const forest: Theme = {
+  strongText: colors.publish.forest.text.strong,
+  mainText: colors.publish.forest.text.main,
+  weakText: colors.publish.forest.text.weak,
+  strongIcon: colors.publish.forest.icon.strong,
+  mainIcon: colors.publish.forest.icon.main,
+  weakIcon: colors.publish.forest.icon.weak,
+  select: colors.publish.forest.other.select,
+  mask: colors.publish.forest.other.mask,
+  background: colors.publish.forest.other.background,
+};
diff --git a/web/src/beta/core/Crust/theme/index.ts b/web/src/beta/core/Crust/theme/index.ts
new file mode 100644
index 0000000000..54ce27eef4
--- /dev/null
+++ b/web/src/beta/core/Crust/theme/index.ts
@@ -0,0 +1,73 @@
+import { useMemo } from "react";
+import tinycolor from "tinycolor2";
+
+import { dark } from "./dark";
+import { forest } from "./forest";
+import { light } from "./light";
+
+export type Theme = {
+  strongText: string;
+  mainText: string;
+  weakText: string;
+  strongIcon: string;
+  mainIcon: string;
+  weakIcon: string;
+  select: string;
+  mask: string;
+  background: string;
+};
+
+export type SceneThemeOptions = {
+  themeType?: "light" | "dark" | "forest" | "custom";
+  themeTextColor?: string;
+  themeSelectColor?: string;
+  themeBackgroundColor?: string;
+};
+
+const isDark = (hex: string): boolean => tinycolor(hex).isDark();
+
+const defaultThemeType = "dark";
+const premade: Record<string, Theme | undefined> = {
+  dark,
+  light,
+  forest,
+};
+
+export function mask(color?: string) {
+  if (!color) return;
+  return isDark(color) ? "rgba(255, 255, 255, 0.15)" : "rgba(0, 0, 0, 0.15)";
+}
+
+export function usePublishTheme(sceneThemeOptions?: SceneThemeOptions): Theme {
+  return useMemo(() => publishTheme(sceneThemeOptions), [sceneThemeOptions]);
+}
+
+export function publishTheme(sceneThemeOptions?: SceneThemeOptions): Theme {
+  const premadeTheme = premade[sceneThemeOptions?.themeType || defaultThemeType];
+  if (premadeTheme) return premadeTheme;
+
+  const options = {
+    ...sceneThemeOptions,
+    themeBackgroundColor: sceneThemeOptions?.themeBackgroundColor || "#dfe5f0",
+    themeTextColor: sceneThemeOptions?.themeTextColor || "#434343",
+    themeSelectColor: sceneThemeOptions?.themeSelectColor || "#C52C63",
+  };
+
+  const isBackgroundDark = isDark(options?.themeBackgroundColor);
+
+  return {
+    mask: mask(options?.themeBackgroundColor) || "rgba(255, 255, 255, 0.15)",
+    background: options.themeBackgroundColor,
+    mainText: options.themeTextColor,
+    select: options.themeSelectColor,
+    strongIcon: isBackgroundDark
+      ? tinycolor(options.themeTextColor).lighten(25).toHex8String()
+      : "#FFFFFF",
+    strongText: isBackgroundDark
+      ? tinycolor(options.themeTextColor).lighten(25).toHex8String()
+      : "#FFFFFF",
+    weakText: tinycolor(options.themeTextColor).setAlpha(0.5).toHex8String(),
+    mainIcon: tinycolor(options.themeTextColor).setAlpha(0.5).toHex8String(),
+    weakIcon: tinycolor(options.themeTextColor).setAlpha(0.25).toHex8String(),
+  };
+}
diff --git a/web/src/beta/core/Crust/theme/light.ts b/web/src/beta/core/Crust/theme/light.ts
new file mode 100644
index 0000000000..6bbab9b7c9
--- /dev/null
+++ b/web/src/beta/core/Crust/theme/light.ts
@@ -0,0 +1,15 @@
+import { colors } from "@reearth/services/theme";
+
+import type { Theme } from ".";
+
+export const light: Theme = {
+  strongText: colors.publish.light.text.strong,
+  mainText: colors.publish.light.text.main,
+  weakText: colors.publish.light.text.weak,
+  strongIcon: colors.publish.light.icon.strong,
+  mainIcon: colors.publish.light.icon.main,
+  weakIcon: colors.publish.light.icon.weak,
+  select: colors.publish.light.other.select,
+  mask: colors.publish.light.other.mask,
+  background: colors.publish.light.other.background,
+};
diff --git a/web/src/beta/core/Crust/types.ts b/web/src/beta/core/Crust/types.ts
new file mode 100644
index 0000000000..4c6088213a
--- /dev/null
+++ b/web/src/beta/core/Crust/types.ts
@@ -0,0 +1,13 @@
+export type {
+  Camera,
+  Typography,
+  LatLng,
+  FlyToDestination,
+  LookAtDestination,
+  Clock,
+  ValueTypes,
+  ValueType,
+  Ref as MapRef,
+  SceneProperty,
+} from "../Map";
+export type { Theme } from "./theme";
diff --git a/web/src/beta/core/Crust/utils.ts b/web/src/beta/core/Crust/utils.ts
new file mode 100644
index 0000000000..f91ea24d43
--- /dev/null
+++ b/web/src/beta/core/Crust/utils.ts
@@ -0,0 +1,36 @@
+import { css } from "@reearth/services/theme";
+
+import { Typography } from "./types";
+
+export type { Typography } from "./types";
+
+export const typographyStyles = (t?: Typography) => {
+  if (!t) return null;
+  return css`
+    font: ${toCSSFont(t)};
+    text-decoration: ${toTextDecoration(t)};
+    color: ${t.color ?? null};
+    text-align: ${t.textAlign ?? null};
+  `;
+};
+
+export const getCSSFontFamily = (f?: string) => {
+  return !f
+    ? undefined
+    : f === "YuGothic"
+    ? `"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic"`
+    : f;
+};
+
+export const toCSSFont = (t?: Typography, d?: Typography) => {
+  const ff = getCSSFontFamily(t?.fontFamily ?? d?.fontFamily)
+    ?.replace("'", '"')
+    .trim();
+  return `${t?.italic ?? d?.italic ? "italic " : ""}${
+    t?.bold ?? d?.bold ? "bold " : (t?.fontWeight ?? d?.fontWeight ?? "") + " " ?? ""
+  }${t?.fontSize ?? d?.fontSize ?? 16}px ${
+    ff ? (ff.includes(`"`) ? ff : `"${ff}"`) : "sans-serif"
+  }`;
+};
+
+export const toTextDecoration = (t?: Typography) => (t?.underline ? "underline" : "none");
diff --git a/web/src/beta/core/Map/ClusteredLayers/index.tsx b/web/src/beta/core/Map/ClusteredLayers/index.tsx
new file mode 100644
index 0000000000..dea9793ce8
--- /dev/null
+++ b/web/src/beta/core/Map/ClusteredLayers/index.tsx
@@ -0,0 +1,106 @@
+import { ComponentType, useMemo, useCallback, ReactNode } from "react";
+
+import LayerComponent, { type CommonProps, type Props as LayerProps } from "../Layer";
+import type { Layer, Atom, Typography, DataType } from "../types";
+
+export type Props = {
+  layers?: Layer[];
+  atomMap?: Map<string, Atom>;
+  overrides?: Record<string, Record<string, any>>;
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  isHidden?: (id: string) => boolean;
+  clusters?: Cluster[];
+  delegatedDataTypes?: DataType[];
+  sceneProperty?: any;
+  clusterComponent?: ClusterComponentType;
+  Feature?: LayerProps["Feature"];
+} & Omit<CommonProps, "isSelected" | "isHidden" | "selectedFeatureId">;
+
+export type Cluster = {
+  id: string;
+  property?: ClusterProperty;
+  layers?: string[];
+};
+
+export type ClusterComponentProps = {
+  cluster: Cluster;
+  property?: ClusterProperty;
+  children?: ReactNode;
+};
+
+export type ClusterProperty = {
+  default?: {
+    clusterPixelRange: number;
+    clusterMinSize: number;
+    clusterLabelTypography?: Typography;
+    clusterImage?: string;
+    clusterImageHeight?: number;
+    clusterImageWidth?: number;
+  };
+  layers?: { layer?: string }[];
+};
+
+export type ClusterComponentType = ComponentType<ClusterComponentProps>;
+
+export default function ClusteredLayers({
+  clusters,
+  clusterComponent,
+  layers,
+  atomMap,
+  selectedLayerId,
+  overrides,
+  delegatedDataTypes,
+  isHidden,
+  ...props
+}: Props): JSX.Element | null {
+  const Cluster = clusterComponent;
+  const clusteredLayers = useMemo<Set<string>>(
+    () => new Set(clusters?.flatMap(c => (c.layers ?? []).filter(Boolean))),
+    [clusters],
+  );
+
+  const renderLayer = useCallback(
+    (layer: Layer) => {
+      const a = atomMap?.get(layer.id);
+      return !layer.id || !a ? null : (
+        <LayerComponent
+          key={layer.id}
+          {...props}
+          layer={layer}
+          atom={a}
+          overrides={overrides?.[layer.id]}
+          isSelected={selectedLayerId?.layerId == layer.id}
+          selectedFeatureId={selectedLayerId?.featureId}
+          isHidden={isHidden?.(layer.id)}
+          delegatedDataTypes={delegatedDataTypes}
+        />
+      );
+    },
+    [
+      atomMap,
+      props,
+      overrides,
+      selectedLayerId?.layerId,
+      selectedLayerId?.featureId,
+      isHidden,
+      delegatedDataTypes,
+    ],
+  );
+
+  return (
+    <>
+      {Cluster &&
+        clusters
+          ?.filter(cluster => !!cluster.id)
+          .map(cluster => (
+            <Cluster key={cluster.id} cluster={cluster} property={cluster.property}>
+              {layers?.filter(layer => cluster?.layers?.some(l => l === layer.id)).map(renderLayer)}
+            </Cluster>
+          ))}
+      {layers?.filter(layer => !clusteredLayers.has(layer.id)).map(renderLayer)}
+    </>
+  );
+}
diff --git a/web/src/beta/core/Map/Layer/hooks.ts b/web/src/beta/core/Map/Layer/hooks.ts
new file mode 100644
index 0000000000..86ec58e21a
--- /dev/null
+++ b/web/src/beta/core/Map/Layer/hooks.ts
@@ -0,0 +1,168 @@
+import { useAtom } from "jotai";
+import { isEqual, pick } from "lodash-es";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
+
+import { requestIdleCallbackWithRequiredWork } from "@reearth/beta/utils/idle";
+
+import {
+  clearAllExpressionCaches,
+  computeAtom,
+  DataType,
+  evalFeature,
+  type Data,
+} from "../../mantle";
+import type { Atom, DataRange, Layer, ComputedLayer, ComputedFeature, Feature } from "../types";
+
+export type { Atom as Atom } from "../types";
+
+export const createAtom = computeAtom;
+
+export type EvalFeature = (layer: Layer, feature: Feature) => ComputedFeature | undefined;
+
+export default function useHooks({
+  layer,
+  atom,
+  overrides,
+  delegatedDataTypes,
+  selected,
+  selectedFeatureId,
+}: {
+  layer: Layer | undefined;
+  atom: Atom | undefined;
+  overrides?: Record<string, any>;
+  delegatedDataTypes?: DataType[];
+  selected?: boolean;
+  selectedFeatureId?: string;
+}) {
+  const [computedLayer, set] = useAtom(useMemo(() => atom ?? createAtom(), [atom]));
+  const writeFeatures = useCallback(
+    (features: Feature[]) => set({ type: "writeFeatures", features }),
+    [set],
+  );
+  const writeComputedFeatures = useCallback(
+    (feature: Feature[], computed: ComputedFeature[]) =>
+      set({ type: "writeComputedFeatures", value: { feature, computed } }),
+    [set],
+  );
+  const requestFetch = useCallback(
+    (range: DataRange) => set({ type: "requestFetch", range }),
+    [set],
+  );
+  const deleteFeatures = useCallback(
+    (features: string[]) => set({ type: "deleteFeatures", features }),
+    [set],
+  );
+  const deleteComputedFeatures = useCallback(
+    (features: string[]) => set({ type: "deleteComputedFeatures", features }),
+    [set],
+  );
+  const forceUpdateFeatures = useCallback(() => set({ type: "forceUpdateFeatures" }), [set]);
+
+  useLayoutEffect(() => {
+    set({ type: "updateDelegatedDataTypes", delegatedDataTypes: delegatedDataTypes ?? [] });
+  }, [delegatedDataTypes, set]);
+
+  useLayoutEffect(() => {
+    set({
+      type: "override",
+      overrides,
+    });
+  }, [set, overrides]);
+
+  useLayoutEffect(() => {
+    set({
+      type: "setLayer",
+      layer:
+        typeof layer?.visible === "undefined" || layer?.type === null || layer?.type
+          ? layer
+          : undefined,
+    });
+  }, [layer, set]);
+
+  const intervalId = useRef<number>();
+  useLayoutEffect(() => {
+    const data = layer?.type === "simple" ? layer.data : undefined;
+
+    if (!data?.updateInterval || !data?.url) {
+      return;
+    }
+
+    intervalId.current = window.setInterval(forceUpdateFeatures, data.updateInterval);
+
+    return () => {
+      if (intervalId.current) {
+        clearInterval(intervalId.current);
+      }
+    };
+  }, [layer, forceUpdateFeatures]);
+
+  const prevForceUpdatableData = useRef<Pick<Data, "csv" | "jsonProperties">>();
+  useLayoutEffect(() => {
+    const data = layer?.type === "simple" ? layer.data : undefined;
+    const forceUpdatableData = pick(data, "csv", "jsonProperties");
+
+    if (isEqual(forceUpdatableData, prevForceUpdatableData.current) || !data?.url) {
+      return;
+    }
+
+    forceUpdateFeatures();
+
+    prevForceUpdatableData.current = forceUpdatableData;
+  }, [layer, forceUpdateFeatures]);
+
+  // Clear expression cache if layer is unmounted
+  useEffect(
+    () => () => {
+      requestIdleCallbackWithRequiredWork(() => {
+        // This is a little heavy task, and not critical for main functionality, so we can run this at idle time.
+        computedLayer?.originalFeatures.forEach(f => {
+          clearAllExpressionCaches(
+            computedLayer.layer.type === "simple" ? computedLayer.layer : undefined,
+            f,
+          );
+        });
+      });
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps -- clear cache only when layer is unmounted
+  );
+
+  useSelectEvent({ layer, selected, computedLayer, selectedFeatureId });
+
+  return {
+    computedLayer,
+    handleFeatureRequest: requestFetch,
+    handleFeatureFetch: writeFeatures,
+    handleComputedFeatureFetch: writeComputedFeatures,
+    handleFeatureDelete: deleteFeatures,
+    handleComputedFeatureDelete: deleteComputedFeatures,
+    evalFeature,
+  };
+}
+
+function useSelectEvent({
+  layer,
+  selected,
+  computedLayer,
+  selectedFeatureId,
+}: {
+  layer: Layer | undefined;
+  selected: boolean | undefined;
+  computedLayer?: ComputedLayer;
+  selectedFeatureId?: string;
+}) {
+  const selectEvent = layer?.type === "simple" ? layer.events?.select : undefined;
+  useEffect(() => {
+    if (!selected || !selectEvent) return;
+    if (selectEvent.openUrl) {
+      const url = selectEvent.openUrl.urlKey
+        ? (selectedFeatureId
+            ? computedLayer?.features.find(f => f.id === selectedFeatureId)?.properties
+            : computedLayer?.properties)?.[selectEvent.openUrl.urlKey]
+        : selectEvent.openUrl.url;
+      if (typeof url === "string" && url) {
+        window.open(url, "_blank", "noreferrer");
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selected, selectedFeatureId]); // only selected
+}
diff --git a/web/src/beta/core/Map/Layer/index.tsx b/web/src/beta/core/Map/Layer/index.tsx
new file mode 100644
index 0000000000..4d1d82afcd
--- /dev/null
+++ b/web/src/beta/core/Map/Layer/index.tsx
@@ -0,0 +1,87 @@
+import { ComponentType } from "react";
+
+import type {
+  DataRange,
+  Feature,
+  ComputedLayer,
+  Layer,
+  DataType,
+  ComputedFeature,
+} from "../../mantle";
+
+import useHooks, { type Atom, type EvalFeature } from "./hooks";
+
+export type { EvalFeature } from "./hooks";
+
+export type { Layer, LayerSimple, ComputedFeature } from "../types";
+
+export type FeatureComponentType = ComponentType<FeatureComponentProps>;
+
+export type CommonProps = {
+  isBuilt?: boolean;
+  isEditable?: boolean;
+  isHidden?: boolean;
+  isSelected?: boolean;
+  meta?: Record<string, unknown>;
+};
+
+export type FeatureComponentProps = {
+  layer: ComputedLayer;
+  sceneProperty?: any;
+  onFeatureRequest?: (range: DataRange) => void;
+  onFeatureFetch?: (features: Feature[]) => void;
+  onComputedFeatureFetch?: (feature: Feature[], computed: ComputedFeature[]) => void;
+  onFeatureDelete?: (features: string[]) => void;
+  onComputedFeatureDelete?: (features: string[]) => void;
+  evalFeature: EvalFeature;
+} & CommonProps;
+
+export type Props = {
+  layer?: Layer;
+  atom?: Atom;
+  overrides?: Record<string, any>;
+  delegatedDataTypes?: DataType[];
+  sceneProperty?: any;
+  selectedFeatureId?: string;
+  /** Feature component should be injected by a map engine. */
+  Feature?: ComponentType<FeatureComponentProps>;
+} & CommonProps;
+
+export default function LayerComponent({
+  Feature,
+  layer,
+  atom,
+  overrides,
+  delegatedDataTypes,
+  ...props
+}: Props): JSX.Element | null {
+  const {
+    computedLayer,
+    handleFeatureDelete,
+    handleComputedFeatureDelete,
+    handleFeatureFetch,
+    handleComputedFeatureFetch,
+    handleFeatureRequest,
+    evalFeature,
+  } = useHooks({
+    layer: Feature ? layer : undefined,
+    atom,
+    overrides,
+    delegatedDataTypes,
+    selected: props.isSelected,
+    selectedFeatureId: props.selectedFeatureId,
+  });
+
+  return layer && computedLayer && Feature ? (
+    <Feature
+      layer={computedLayer}
+      onFeatureDelete={handleFeatureDelete}
+      onComputedFeatureDelete={handleComputedFeatureDelete}
+      onFeatureFetch={handleFeatureFetch}
+      onComputedFeatureFetch={handleComputedFeatureFetch}
+      onFeatureRequest={handleFeatureRequest}
+      evalFeature={evalFeature}
+      {...props}
+    />
+  ) : null;
+}
diff --git a/web/src/beta/core/Map/Layers/hooks.test.ts b/web/src/beta/core/Map/Layers/hooks.test.ts
new file mode 100644
index 0000000000..2efd548e59
--- /dev/null
+++ b/web/src/beta/core/Map/Layers/hooks.test.ts
@@ -0,0 +1,799 @@
+import { renderHook } from "@testing-library/react";
+import { useRef } from "react";
+import { expect, test, vi } from "vitest";
+
+import { ComputedFeature } from "../types";
+
+import useHooks, { type Layer, type Ref } from "./hooks";
+
+test("hooks", () => {
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X" },
+    {
+      id: "z",
+      type: "group",
+      children: [
+        {
+          id: "y",
+          type: "simple",
+          title: "Y",
+        },
+      ],
+    },
+    { id: "w", type: "simple", title: "W" },
+  ];
+
+  const {
+    result: { current },
+  } = renderHook(() => useHooks({ layers }));
+
+  expect(current.flattenedLayers).toEqual([
+    { id: "x", type: "simple", title: "X" },
+    { id: "y", type: "simple", title: "Y" },
+    { id: "w", type: "simple", title: "W" },
+  ]);
+  expect(current.atomMap.get("y")).not.toBeUndefined();
+  expect(current.atomMap.get("v")).toBeUndefined();
+});
+
+test("isLayer", () => {
+  const layers: Layer[] = [{ id: "x", type: "simple" }];
+
+  const {
+    result: {
+      current: { current: ref },
+    },
+  } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const _ = useHooks({ layers, ref });
+    return ref;
+  });
+
+  expect(ref?.isLayer(1)).toBe(false);
+  expect(ref?.isLayer({})).toBe(false);
+  const layer = ref?.findById("x");
+  if (!layer) throw new Error("layer is not found");
+  expect(ref?.isLayer(layer)).toBe(true);
+});
+
+test("layers", () => {
+  const layers: Layer[] = [
+    { id: "x", type: "simple" },
+    { id: "y", type: "group", children: [{ id: "z", type: "simple" }] },
+  ];
+
+  const {
+    result: {
+      current: { current: ref },
+    },
+  } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const _ = useHooks({ layers, ref });
+    return ref;
+  });
+
+  const res = ref?.layers();
+  expect(res).toHaveLength(2);
+  expect(res?.[0].id).toBe("x");
+  expect(res?.[1].id).toBe("y");
+});
+
+test("findById", () => {
+  const layers: Layer[] = [{ id: "x", type: "simple", title: "X" }];
+
+  const {
+    result: {
+      current: { current: ref },
+    },
+  } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const _ = useHooks({ layers, ref });
+    return ref;
+  });
+
+  expect(ref?.findById("y")).toBeUndefined();
+  const layer = ref?.findById("x");
+  expect(layer?.id).toBe("x");
+  expect(layer?.title).toBe("X");
+  expect(layer?.computed).toBeUndefined();
+});
+
+test("findByIds", () => {
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X" },
+    { id: "y", type: "simple", title: "Y" },
+  ];
+
+  const {
+    result: {
+      current: { current: ref },
+    },
+  } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const _ = useHooks({ layers, ref });
+    return ref;
+  });
+
+  expect(ref?.findByIds("a", "b")).toEqual([undefined, undefined]);
+
+  const found = ref?.findByIds("x", "y");
+  expect(found?.[0]?.id).toBe("x");
+  expect(found?.[0]?.title).toBe("X");
+  expect(found?.[1]?.id).toBe("y");
+  expect(found?.[1]?.title).toBe("Y");
+});
+
+test("walk", () => {
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X" },
+    { id: "z", type: "group", children: [{ id: "y", type: "simple", title: "Y" }] },
+    { id: "w", type: "simple", title: "W" },
+  ];
+
+  const {
+    result: {
+      current: { current: ref },
+    },
+  } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const _ = useHooks({ layers, ref });
+    return ref;
+  });
+
+  const cb1 = vi.fn(() => "a");
+  expect(ref?.walk(cb1)).toBe("a");
+  expect(cb1.mock.calls).toEqual([[{ id: "x" }, 0, [{ id: "x" }, { id: "z" }, { id: "w" }]]]);
+
+  const cb2 = vi.fn();
+  expect(ref?.walk(cb2)).toBeUndefined();
+  expect(cb2.mock.calls).toEqual([
+    [{ id: "x" }, 0, [{ id: "x" }, { id: "z" }, { id: "w" }]],
+    [{ id: "z" }, 1, [{ id: "x" }, { id: "z" }, { id: "w" }]],
+    [{ id: "y" }, 0, [{ id: "y" }]],
+    [{ id: "w" }, 2, [{ id: "x" }, { id: "z" }, { id: "w" }]],
+  ]);
+});
+
+test("find", () => {
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X" },
+    { id: "z", type: "group", children: [{ id: "y", type: "simple", title: "Y" }] },
+  ];
+
+  const {
+    result: {
+      current: { current: ref },
+    },
+  } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const _ = useHooks({ layers, ref });
+    return ref;
+  });
+
+  expect(ref?.find(l => l.title === "A")).toBeUndefined();
+
+  const found = ref?.find(l => l.title === "X" || l.title === "Y");
+  expect(found?.id).toBe("x");
+  expect(found?.title).toBe("X");
+});
+
+test("findAll", () => {
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X" },
+    { id: "z", type: "group", children: [{ id: "y", type: "simple", title: "Y" }] },
+  ];
+
+  const {
+    result: {
+      current: { current: ref },
+    },
+  } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const _ = useHooks({ layers, ref });
+    return ref;
+  });
+
+  expect(ref?.findAll(l => l.title === "A")).toEqual([]);
+
+  const found = ref?.findAll(l => l.title === "X" || l.title === "Y");
+  expect(found?.[0]?.id).toBe("x");
+  expect(found?.[0]?.title).toBe("X");
+  expect(found?.[1]?.id).toBe("y");
+  expect(found?.[1]?.title).toBe("Y");
+});
+
+test("findByTags", () => {
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X", tags: [{ id: "tag", label: "Tag" }] },
+    {
+      id: "z",
+      type: "group",
+      children: [
+        {
+          id: "y",
+          type: "simple",
+          title: "Y",
+          tags: [
+            { id: "tag2", label: "Tag2" },
+            { id: "tag", label: "Tag" },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const {
+    result: {
+      current: { current: ref },
+    },
+  } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const _ = useHooks({ layers, ref });
+    return ref;
+  });
+
+  expect(ref?.findByTags("Tag")).toEqual([]);
+
+  const found = ref?.findByTags("tag", "tag2");
+  expect(found?.[0]?.id).toBe("x");
+  expect(found?.[0]?.title).toBe("X");
+  expect(found?.[1]?.id).toBe("y");
+  expect(found?.[1]?.title).toBe("Y");
+});
+
+test("findByTagLabels", () => {
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X", tags: [{ id: "tag", label: "Tag" }] },
+    {
+      id: "z",
+      type: "group",
+      children: [
+        {
+          id: "y",
+          type: "simple",
+          title: "Y",
+          tags: [
+            { id: "tag2", label: "Tag2" },
+            { id: "tag", label: "Tag" },
+          ],
+        },
+      ],
+    },
+  ];
+
+  const {
+    result: {
+      current: { current: ref },
+    },
+  } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const _ = useHooks({ layers, ref });
+    return ref;
+  });
+
+  expect(ref?.findByTagLabels("tag")).toEqual([]);
+
+  const found = ref?.findByTagLabels("Tag", "Tag2");
+  expect(found?.[0]?.id).toBe("x");
+  expect(found?.[0]?.title).toBe("X");
+  expect(found?.[1]?.id).toBe("y");
+  expect(found?.[1]?.title).toBe("Y");
+});
+
+test("add, replace, delete", () => {
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X" },
+    {
+      id: "z",
+      type: "group",
+      children: [
+        {
+          id: "y",
+          type: "simple",
+          title: "Y",
+        },
+      ],
+    },
+    { id: "w", type: "simple", title: "W" },
+  ];
+
+  const { result, rerender } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const { flattenedLayers } = useHooks({ layers, ref });
+    return { ref, flattenedLayers };
+  });
+
+  const idLength = 36;
+  const addedLayers = result.current.ref.current?.addAll({
+    type: "group",
+    title: "C",
+    children: [
+      {
+        type: "group",
+        title: "B",
+        children: [
+          {
+            type: "simple",
+            title: "A",
+            infobox: {
+              blocks: [{ extensionId: "a" }],
+            },
+          },
+        ],
+      },
+    ],
+  });
+  const l = addedLayers?.[0];
+  expect(l?.id).toBeTypeOf("string");
+  expect(l?.id).toHaveLength(idLength);
+  expect(l?.type).toBe("group");
+  expect(l?.title).toBe("C");
+  if (l?.type !== "group") throw new Error("invalid layer type");
+  expect(l.children[0].id).toBeTypeOf("string");
+  expect(l.children[0].id).toHaveLength(idLength);
+  expect(l.children[0].type).toBe("group");
+  expect(l.children[0].title).toBe("B");
+  if (l.children[0].type !== "group") throw new Error("invalid layer type");
+  expect(l.children[0].children[0].id).toBeTypeOf("string");
+  expect(l.children[0].children[0].id).toHaveLength(idLength);
+  expect(l.children[0].children[0].type).toBe("simple");
+  expect(l.children[0].children[0].title).toBe("A");
+  expect(l.children[0].children[0].infobox?.blocks?.[0].id).toBeTypeOf("string");
+  expect(l.children[0].children[0].infobox?.blocks?.[0].id).toHaveLength(idLength);
+
+  rerender();
+
+  expect(result.current.flattenedLayers).toEqual([
+    { id: "x", type: "simple", title: "X" },
+    { id: "y", type: "simple", title: "Y" },
+    { id: "w", type: "simple", title: "W" },
+    {
+      id: l.children[0].children[0].id,
+      type: "simple",
+      title: "A",
+      infobox: {
+        blocks: [{ id: l.children[0].children[0].infobox?.blocks?.[0].id, extensionId: "a" }],
+      },
+    },
+  ]);
+
+  result.current.ref.current?.replace({
+    id: l.children[0].children[0].id,
+    type: "simple",
+    title: "A!",
+  });
+
+  rerender();
+
+  expect(result.current.flattenedLayers).toEqual([
+    { id: "x", type: "simple", title: "X" },
+    { id: "y", type: "simple", title: "Y" },
+    { id: "w", type: "simple", title: "W" },
+    {
+      id: l.children[0].children[0].id,
+      type: "simple",
+      title: "A!",
+    },
+  ]);
+
+  result.current.ref.current?.deleteLayer(l.children[0].id, "w");
+
+  rerender();
+
+  expect(result.current.flattenedLayers).toEqual([
+    { id: "x", type: "simple", title: "X" },
+    { id: "y", type: "simple", title: "Y" },
+    { id: "w", type: "simple", title: "W" },
+  ]);
+});
+
+test("delete", () => {
+  const layers: Layer[] = [{ id: "x", type: "simple", title: "X" }];
+
+  const { result, rerender } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const { flattenedLayers } = useHooks({ layers, ref });
+    return { ref, flattenedLayers };
+  });
+
+  result.current.ref.current?.add({
+    type: "simple",
+    title: "a",
+  });
+  const lb = result.current.ref.current?.add({
+    type: "simple",
+    title: "b",
+  });
+
+  result.current.ref.current?.deleteLayer(lb?.id || "");
+
+  rerender();
+
+  expect(result.current.flattenedLayers).toEqual([
+    { type: "simple", id: "x", title: "X" },
+    { type: "simple", id: expect.any(String), title: "a" },
+  ]);
+});
+
+test("override", () => {
+  const dataValue = {
+    type: "Feature",
+    geometry: { type: "Point", coordinates: [1, 2] },
+    hoge: "foobar", // test
+  };
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X" },
+    {
+      id: "z",
+      type: "group",
+      children: [
+        {
+          id: "y",
+          type: "simple",
+          title: "Y",
+          data: { type: "geojson", value: dataValue },
+          marker: { pointSize: 10, pointColor: "red" },
+        },
+      ],
+    },
+  ];
+
+  const { result, rerender } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const { flattenedLayers } = useHooks({ layers, ref });
+    return { ref, flattenedLayers };
+  });
+
+  const dataValue2 = {
+    type: "geojson",
+    value: { type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } },
+  };
+  result.current.ref.current?.override("y", {
+    id: "z", // should be ignored
+    ...({
+      type: "group", // should be ignored
+    } as any),
+    title: "Y!",
+    data: { value: dataValue2 },
+    marker: { pointSize: 100 },
+    tags: [{ id: "t", label: "t" }],
+  });
+  rerender();
+  const l = result.current.flattenedLayers[1];
+  if (l.type !== "simple") throw new Error("invalid layer type");
+  expect(l.title).toBe("Y!");
+  expect(l.data?.value).toBe(dataValue2);
+  expect(l.marker).toEqual({ pointSize: 100, pointColor: "red" });
+  expect(l.tags).toEqual([{ id: "t", label: "t" }]);
+  expect(result.current.ref.current?.findById("y")?.title).toBe("Y");
+
+  result.current.ref.current?.override("y", {
+    title: "Y!!",
+    marker: { pointColor: "blue" },
+    tags: [{ id: "t2", label: "t2" }],
+  });
+  rerender();
+  const l2 = result.current.flattenedLayers[1];
+  if (l2.type !== "simple") throw new Error("invalid layer type");
+  expect(l2.title).toBe("Y!!");
+  expect(l2.data?.value).toBe(dataValue2);
+  expect(l2.marker).toEqual({ pointSize: 100, pointColor: "blue" });
+  expect(l2.tags).toEqual([{ id: "t2", label: "t2" }]);
+
+  result.current.ref.current?.override("y");
+  rerender();
+  const l3 = result.current.flattenedLayers[1];
+  if (l3.type !== "simple") throw new Error("invalid layer type");
+  expect(l3.title).toBe("Y!!");
+  expect(l3.data?.value).toBe(dataValue2);
+  expect(l3.marker).toEqual({ pointSize: 100, pointColor: "blue" });
+  expect(l2.tags).toEqual([{ id: "t2", label: "t2" }]);
+
+  result.current.ref.current?.override("y", { marker: {} });
+  rerender();
+  const l4 = result.current.flattenedLayers[1];
+  if (l4.type !== "simple") throw new Error("invalid layer type");
+  expect(l4.title).toBe("Y!!");
+  expect(l4.data?.value).toBe(dataValue2);
+  expect(l4.marker).toEqual({});
+  expect(l2.tags).toEqual([{ id: "t2", label: "t2" }]);
+
+  result.current.ref.current?.override("y", { marker: undefined });
+  rerender();
+  const l5 = result.current.flattenedLayers[1];
+  if (l5.type !== "simple") throw new Error("invalid layer type");
+  expect(l5.title).toBe("Y!!");
+  expect(l5.data?.value).toBe(dataValue2);
+  expect(l5.marker).toEqual({ pointSize: 10, pointColor: "red" });
+  expect(l2.tags).toEqual([{ id: "t2", label: "t2" }]);
+});
+
+test("override property for compat", () => {
+  const dataValue = {
+    type: "Feature",
+    id: "y",
+    geometry: { type: "Point", coordinates: [1, 2] },
+  };
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X" },
+    {
+      id: "z",
+      type: "group",
+      children: [
+        {
+          id: "y",
+          type: "simple",
+          title: "Y",
+          data: { type: "geojson", value: dataValue },
+          marker: { pointSize: 10, pointColor: "red" },
+          compat: {
+            extensionId: "marker",
+          },
+        },
+      ],
+    },
+  ];
+
+  const { result, rerender } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const { flattenedLayers } = useHooks({ layers, ref });
+    return { ref, flattenedLayers };
+  });
+
+  result.current.ref.current?.override("y", {
+    property: {
+      default: {
+        pointSize: 100,
+        location: {
+          lat: 1,
+          lng: 2,
+        },
+      },
+    },
+  });
+  rerender();
+  const l = result.current.flattenedLayers[1];
+  if (l.type !== "simple") throw new Error("invalid layer type");
+  expect(l.title).toBe("Y");
+  expect(l.data?.value).toEqual({
+    ...dataValue,
+    geometry: { ...dataValue.geometry, coordinates: [2, 1] },
+  });
+  expect(l.marker).toEqual({ pointSize: 100, pointColor: "red" });
+  expect(l.tags).toBeUndefined();
+
+  result.current.ref.current?.override("y", {
+    property: {
+      pointSize: 200,
+    },
+  });
+  rerender();
+  const l2 = result.current.flattenedLayers[1];
+  if (l2.type !== "simple") throw new Error("invalid layer type");
+  expect(l2.data?.value).toBe(dataValue);
+  expect(l2.marker).toEqual({});
+
+  result.current.ref.current?.override("y");
+  rerender();
+  const l3 = result.current.flattenedLayers[1];
+  if (l3.type !== "simple") throw new Error("invalid layer type");
+  expect(l3.title).toBe("Y");
+  expect(l3.data?.value).toBe(dataValue);
+  expect(l3.marker).toEqual({});
+  expect(l3.tags).toBeUndefined();
+});
+
+test("hide and show", () => {
+  const layers: Layer[] = [
+    { id: "x", type: "simple", title: "X" },
+    { id: "y", type: "simple", title: "Y" },
+  ];
+
+  const { result, rerender } = renderHook(
+    ({ hiddenLayers }: { hiddenLayers: string[] }) => {
+      const ref = useRef<Ref>(null);
+      const { isHidden } = useHooks({ layers, ref, hiddenLayers });
+      return { ref, isHidden };
+    },
+    {
+      initialProps: { hiddenLayers: ["y"] },
+    },
+  );
+
+  expect(result.current.isHidden("x")).toBe(false);
+  expect(result.current.isHidden("y")).toBe(true);
+
+  result.current.ref.current?.hide("x");
+  rerender({ hiddenLayers: ["y"] });
+
+  expect(result.current.isHidden("x")).toBe(true);
+  expect(result.current.isHidden("y")).toBe(true);
+
+  rerender({ hiddenLayers: ["x"] });
+
+  expect(result.current.isHidden("x")).toBe(true);
+  expect(result.current.isHidden("y")).toBe(false);
+
+  result.current.ref.current?.show("x");
+  result.current.ref.current?.show("y");
+  rerender({ hiddenLayers: ["x"] });
+
+  expect(result.current.isHidden("x")).toBe(true);
+  expect(result.current.isHidden("y")).toBe(false);
+
+  rerender({ hiddenLayers: [] });
+
+  expect(result.current.isHidden("x")).toBe(false);
+  expect(result.current.isHidden("y")).toBe(false);
+});
+
+test("compat", () => {
+  const { result, rerender } = renderHook(() => {
+    const ref = useRef<Ref>(null);
+    const { flattenedLayers } = useHooks({ ref });
+    return { ref, flattenedLayers };
+  });
+
+  result.current.ref.current?.add({
+    type: "item",
+    title: "X",
+    extensionId: "marker",
+    property: {
+      default: {
+        location: { lat: 1, lng: 2 },
+        pointSize: 10,
+      },
+    },
+  } as any);
+  rerender();
+  const l = result.current.flattenedLayers[0];
+  if (l.type !== "simple") throw new Error("invalid layer type");
+  expect(l.title).toBe("X");
+  expect(l.marker).toEqual({ pointSize: 10 });
+  expect(l.data).toEqual({
+    type: "geojson",
+    value: { type: "Feature", geometry: { type: "Point", coordinates: [2, 1] } },
+  });
+
+  const l2: any = result.current.ref.current?.findById(l.id);
+  expect(l2.marker).toEqual({ pointSize: 10 });
+  expect(l2.pluginId).toBe("reearth");
+  expect(l2.extensionId).toBe("marker");
+  expect(l2.property).toEqual({
+    default: {
+      location: { lat: 1, lng: 2 },
+      pointSize: 10,
+    },
+  });
+
+  result.current.ref.current?.override(l.id, {
+    marker: { pointColor: "blue" },
+  });
+  rerender();
+  const l3 = result.current.flattenedLayers[0];
+  if (l3.type !== "simple") throw new Error("invalid layer type");
+  expect(l3.marker).toEqual({ pointSize: 10, pointColor: "blue" });
+  expect(l3.compat?.property).toEqual({
+    default: {
+      location: { lat: 1, lng: 2 },
+      pointSize: 10,
+    },
+  });
+
+  const l4: any = result.current.ref.current?.findById(l.id);
+  expect(l4.marker).toEqual({ pointSize: 10 });
+  expect(l4.pluginId).toBe("reearth");
+  expect(l4.extensionId).toBe("marker");
+  expect(l4.property).toEqual({
+    default: {
+      location: { lat: 1, lng: 2 },
+      pointSize: 10,
+    },
+  });
+
+  result.current.ref.current?.override(l.id, {
+    property: { default: { pointColor: "yellow" } },
+  } as any);
+  rerender();
+  const l5 = result.current.flattenedLayers[0];
+  if (l5.type !== "simple") throw new Error("invalid layer type");
+  expect(l5.marker).toEqual({ pointSize: 10, pointColor: "yellow" });
+  expect(l5.compat?.property).toEqual({
+    default: {
+      location: { lat: 1, lng: 2 },
+      pointSize: 10,
+      pointColor: "yellow",
+    },
+  });
+
+  const l6: any = result.current.ref.current?.findById(l.id);
+  expect(l6.marker).toEqual({ pointSize: 10 });
+  expect(l6.pluginId).toBe("reearth");
+  expect(l6.extensionId).toBe("marker");
+  expect(l6.property).toEqual({
+    default: {
+      location: { lat: 1, lng: 2 },
+      pointSize: 10,
+    },
+  });
+});
+
+test("select", () => {
+  const handleLayerSelect = vi.fn();
+  const initialLayers: Layer[] = [
+    {
+      id: "x",
+      type: "simple",
+    },
+  ];
+  const { result, rerender } = renderHook(
+    ({ layers }: { layers?: Layer[] } = {}) => {
+      const ref = useRef<Ref>(null);
+      useHooks({ ref, layers, onLayerSelect: handleLayerSelect });
+      return { ref };
+    },
+    {
+      initialProps: {
+        layers: initialLayers,
+      },
+    },
+  );
+
+  // select
+  handleLayerSelect.mockClear();
+  result.current.ref.current?.select(
+    "x",
+    "y",
+    { reason: "reason" },
+    { feature: { id: "abc" } as ComputedFeature },
+  );
+  rerender({ layers: initialLayers });
+  expect(result.current.ref.current?.selectedLayer()).toEqual({
+    id: "x",
+  });
+  expect(handleLayerSelect).toBeCalledWith(
+    "x",
+    "y",
+    expect.any(Function),
+    { reason: "reason" },
+    { feature: { id: "abc" } },
+  );
+  expect(handleLayerSelect).toBeCalledTimes(1);
+
+  // remove reason
+  handleLayerSelect.mockClear();
+  result.current.ref.current?.select("x");
+  rerender({ layers: initialLayers });
+  expect(result.current.ref.current?.selectedLayer()).toEqual({
+    id: "x",
+  });
+  expect(handleLayerSelect).toBeCalledWith(
+    "x",
+    undefined,
+    expect.any(Function),
+    undefined,
+    undefined,
+  );
+  expect(handleLayerSelect).toBeCalledTimes(1);
+
+  // delete layers
+  handleLayerSelect.mockClear();
+  rerender({ layers: [] });
+  expect(result.current.ref.current?.selectedLayer()).toBeUndefined();
+  expect(handleLayerSelect).toBeCalledWith(undefined, undefined, undefined, undefined, undefined);
+  expect(handleLayerSelect).toBeCalledTimes(1);
+
+  // select a layer that does not exist
+  handleLayerSelect.mockClear();
+  result.current.ref.current?.select("y");
+  rerender();
+  expect(result.current.ref.current?.selectedLayer()).toBeUndefined();
+  expect(handleLayerSelect).toBeCalled();
+
+  // unselect
+  handleLayerSelect.mockClear();
+  result.current.ref.current?.select(undefined);
+  rerender();
+  expect(result.current.ref.current?.selectedLayer()).toBeUndefined();
+  expect(handleLayerSelect).not.toBeCalled();
+});
diff --git a/web/src/beta/core/Map/Layers/hooks.ts b/web/src/beta/core/Map/Layers/hooks.ts
new file mode 100644
index 0000000000..162f3e3807
--- /dev/null
+++ b/web/src/beta/core/Map/Layers/hooks.ts
@@ -0,0 +1,739 @@
+import { atom, useAtomValue } from "jotai";
+import { omit, isEqual } from "lodash-es";
+import {
+  ForwardedRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { useSet } from "react-use";
+import { v4 as uuidv4 } from "uuid";
+
+import { DATA_CACHE_KEYS } from "@reearth/beta/core/mantle/atoms/data";
+import { objectFromGetter } from "@reearth/beta/utils/object";
+
+import { computeAtom, convertLegacyLayer, SelectedFeatureInfo } from "../../mantle";
+import type { Atom, ComputedLayer, Layer, NaiveLayer } from "../../mantle";
+import { useGet } from "../utils";
+
+import { computedLayerKeys, layerKeys } from "./keys";
+import { deepAssign } from "./utils";
+
+export type { Layer, NaiveLayer } from "../../mantle";
+
+/**
+ * Same as a Layer, but all fields except id is lazily evaluated,
+ * in order to reduce unnecessary sending and receiving of data to and from
+ * QuickJS (a plugin runtime) and to improve performance.
+ */
+export type LazyLayer = Readonly<Layer> & {
+  computed?: Readonly<ComputedLayer>;
+  // compat
+  pluginId?: string;
+  extensionId?: string;
+  property?: any;
+  propertyId?: string;
+  isVisible?: boolean;
+};
+
+export type Ref = {
+  findById: (id: string) => LazyLayer | undefined;
+  findByIds: (...ids: string[]) => (LazyLayer | undefined)[];
+  add: (layer: NaiveLayer) => LazyLayer | undefined;
+  addAll: (...layers: NaiveLayer[]) => (LazyLayer | undefined)[];
+  replace: (...layers: Layer[]) => void;
+  override: (id: string, layer?: (Partial<Layer> & { property?: any }) | null) => void;
+  deleteLayer: (...ids: string[]) => void;
+  isLayer: (obj: any) => obj is LazyLayer;
+  layers: () => LazyLayer[];
+  walk: <T>(
+    fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => T | void,
+  ) => T | undefined;
+  find: (
+    fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean,
+  ) => LazyLayer | undefined;
+  findAll: (fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean) => LazyLayer[];
+  findByTags: (...tagIds: string[]) => LazyLayer[];
+  findByTagLabels: (...tagLabels: string[]) => LazyLayer[];
+  hide: (...layers: string[]) => void;
+  show: (...layers: string[]) => void;
+  select: (
+    layerId: string | undefined,
+    featureId?: string,
+    reason?: LayerSelectionReason,
+    info?: SelectedFeatureInfo,
+  ) => void;
+  selectedLayer: () => LazyLayer | undefined;
+  overriddenLayers: () => OverriddenLayer[];
+};
+
+export type DefaultInfobox = {
+  title?: string;
+  content:
+    | {
+        type: "table";
+        value: { key: string; value: string }[];
+      }
+    | { type: "html"; value: string };
+};
+
+export type OverriddenLayer = Omit<Layer, "type" | "children">;
+
+export type LayerSelectionReason = {
+  reason?: string;
+  defaultInfobox?: DefaultInfobox;
+};
+
+export type FeatureSelectionReason = {
+  reason?: string;
+  defaultInfobox?: DefaultInfobox;
+};
+
+export default function useHooks({
+  layers,
+  ref,
+  hiddenLayers,
+  selectedLayerId,
+  selectionReason,
+  onLayerSelect,
+}: {
+  layers?: Layer[];
+  ref?: ForwardedRef<Ref>;
+  hiddenLayers?: string[];
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  selectionReason?: LayerSelectionReason;
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId: string | undefined,
+    layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+    reason: LayerSelectionReason | undefined,
+    info: SelectedFeatureInfo | undefined,
+  ) => void;
+}) {
+  const layerMap = useMemo(() => new Map<string, Layer>(), []);
+  const [overriddenLayers, setOverridenLayers] = useState<OverriddenLayer[]>([]);
+  const atomMap = useMemo(() => new Map<string, Atom>(), []);
+  const lazyLayerMap = useMemo(() => new Map<string, LazyLayer>(), []);
+
+  const [hiddenLayerIds, { add: hideLayer, remove: showLayer }] = useSet<string>();
+  const isHidden = useCallback(
+    (id: string) => hiddenLayerIds.has(id) || !!hiddenLayers?.includes(id),
+    [hiddenLayerIds, hiddenLayers],
+  );
+
+  const layersRef = useGet(layers);
+  const [tempLayers, setTempLayers] = useState<Layer[]>([]);
+  const tempLayersRef = useRef<Layer[]>([]);
+  const flattenedLayers = useMemo((): Layer[] => {
+    const newLayers = [...flattenLayers(layers ?? []), ...flattenLayers(tempLayers)];
+    // apply overrides
+    return newLayers.map(l => {
+      const ol: any = overriddenLayers.find(ll => ll.id === l.id);
+      if (!ol) return l;
+
+      // prevents unnecessary copying of data value
+      const dataValue = ol.data?.value ?? (l.type === "simple" ? l.data?.value : undefined);
+      const res = deepAssign(
+        {
+          ...l,
+          ...(l.type === "simple" && l.data ? { data: omit(l.data, "value") } : {}),
+        },
+        { ...ol, ...(ol.data ? { data: omit(ol.data, "value") } : {}) },
+      );
+
+      if (dataValue && res.data) {
+        res.data.value = dataValue;
+      }
+
+      return res;
+    });
+  }, [tempLayers, layers, overriddenLayers]);
+
+  const getComputedLayer = useAtomValue(
+    useMemo(
+      () =>
+        atom(get => (layerId: string) => {
+          const atoms = atomMap.get(layerId);
+          if (!atoms) return;
+          const cl = get(atoms);
+          return cl;
+        }),
+      [atomMap],
+    ),
+  );
+
+  const lazyComputedLayerPrototype = useMemo<object>(() => {
+    return objectFromGetter(
+      // id and layer should not be accessible
+      computedLayerKeys,
+      function (key) {
+        const id: string | undefined = (this as any).id;
+        if (!id || typeof id !== "string") throw new Error("layer ID is not specified");
+
+        const layer = getComputedLayer(id);
+        if (!layer) return undefined;
+        return (layer as any)[key];
+      },
+    );
+  }, [getComputedLayer]);
+
+  const lazyLayerPrototype = useMemo<object>(() => {
+    return objectFromGetter(layerKeys, function (key) {
+      const id: string | undefined = (this as any).id;
+      if (!id || typeof id !== "string") throw new Error("layer ID is not specified");
+
+      const layer = layerMap.get(id);
+      if (!layer) return undefined;
+
+      // compat
+      if (key === "pluginId") return layer.compat?.extensionId ? "reearth" : undefined;
+      else if (key === "extensionId") return layer.compat?.extensionId;
+      else if (key === "property") return layer.compat?.property;
+      else if (key === "propertyId") return layer.compat?.propertyId;
+      else if (key === "isVisible") return layer.visible;
+      // computed
+      else if (key === "computed") {
+        const computedLayer = getComputedLayer(layer.id);
+        if (!computedLayer) return undefined;
+        const computed = Object.create(lazyComputedLayerPrototype);
+        computed.id = id;
+        return computed;
+      }
+
+      return (layer as any)[key];
+    });
+  }, [getComputedLayer, layerMap, lazyComputedLayerPrototype]);
+
+  const findById = useCallback(
+    (layerId: string): LazyLayer | undefined => {
+      const lazyLayer = lazyLayerMap.get(layerId);
+      if (lazyLayer) return lazyLayer;
+
+      if (!layerMap.has(layerId)) return;
+
+      const l = Object.create(lazyLayerPrototype);
+      l.id = layerId;
+      lazyLayerMap.set(layerId, l);
+
+      return l;
+    },
+    [layerMap, lazyLayerMap, lazyLayerPrototype],
+  );
+
+  const findByIds = useCallback(
+    (...ids: string[]): (LazyLayer | undefined)[] => {
+      return ids.map(id => findById(id));
+    },
+    [findById],
+  );
+
+  const { select, selectedLayer } = useSelection({
+    flattenedLayers,
+    selectedLayerId,
+    selectedReason: selectionReason,
+    getLazyLayer: findById,
+    onLayerSelect,
+  });
+
+  const add = useCallback(
+    (layer: NaiveLayer): LazyLayer | undefined => {
+      if (!isValidLayer(layer)) return;
+
+      const rawLayer = compat(layer);
+      if (!rawLayer) return;
+
+      const newLayer = { ...rawLayer, id: uuidv4() };
+
+      // generate ids for layers and blocks
+      walkLayers([newLayer], l => {
+        if (!l.id) {
+          l.id = uuidv4();
+        }
+        l.infobox?.blocks?.forEach(b => {
+          if (b.id) return;
+          b.id = uuidv4();
+        });
+        layerMap.set(l.id, l);
+        atomMap.set(l.id, computeAtom());
+      });
+
+      tempLayersRef.current = [...tempLayersRef.current, newLayer];
+      setTempLayers(layers => [...layers, newLayer]);
+
+      const newLazyLayer = findById(newLayer.id);
+      if (!newLazyLayer) throw new Error("layer not found");
+
+      return newLazyLayer;
+    },
+    [atomMap, findById, layerMap],
+  );
+
+  const addAll = useCallback(
+    (...layers: NaiveLayer[]): (LazyLayer | undefined)[] => {
+      return layers.map(l => add(l));
+    },
+    [add],
+  );
+
+  const replace = useCallback(
+    (...layers: Layer[]) => {
+      const validLayers = layers
+        .filter(isValidLayer)
+        .map(compat)
+        .filter((l): l is Layer => !!l);
+      setTempLayers(currentLayers => {
+        replaceLayers(currentLayers, l => {
+          const i = validLayers.findIndex(ll => ll.id === l.id);
+          if (i >= 0) {
+            const newLayer = { ...validLayers[i] };
+            tempLayersRef.current[i] = newLayer;
+            layerMap.set(newLayer.id, newLayer);
+            return newLayer;
+          }
+          return;
+        });
+        return [...currentLayers];
+      });
+    },
+    [layerMap],
+  );
+
+  const override = useCallback(
+    (id: string, layer?: (Partial<Layer> & { property?: any }) | null) => {
+      const originalLayer = layerMap.get(id);
+      if (!originalLayer) return;
+
+      const overriddenLayer: any = overriddenLayers.find(l => l.id === id);
+      // prevents unnecessary copying of data value
+      const dataValue = (layer as any)?.data?.value ?? overriddenLayer?.data?.value;
+      const res = deepAssign(
+        {
+          ...(overriddenLayer || {}),
+          ...(overriddenLayer?.data ? { data: omit(overriddenLayer.data, "value") } : {}),
+        },
+        {
+          ...(layer || {}),
+          ...((layer as any)?.data ? { data: omit((layer as any).data, "value") } : {}),
+        },
+      );
+
+      if (dataValue && res.data) {
+        res.data.value = dataValue;
+      }
+
+      const property = layer?.property;
+      const rawLayer = compat({
+        ...originalLayer,
+        ...(originalLayer.compat && property
+          ? {
+              type: originalLayer.type === "group" ? "group" : "item",
+              extensionId: originalLayer.compat.extensionId,
+              property: {
+                default: {
+                  ...(originalLayer.compat.property?.default || {}),
+                  ...(property.default || {}),
+                },
+              },
+            }
+          : {}),
+        ...(!originalLayer.compat && property ? { property } : {}),
+        ...res,
+      });
+      if (!rawLayer) return;
+
+      if (
+        rawLayer.type === "simple" &&
+        rawLayer.data?.value &&
+        // If data isn't cachable, reuse layer id for performance.
+        DATA_CACHE_KEYS.some(k => !rawLayer.data?.[k])
+      ) {
+        // If layer property is overridden, feature is legacy layer.
+        // So we can set layer id to prevent unnecessary render.
+        rawLayer.data.value.id = id;
+      }
+
+      const layer2 = { id, ...omit(rawLayer, "id", "type", "children") } as Layer;
+      setOverridenLayers(layers => {
+        const i = layers.findIndex(l => l.id === id);
+        if (i < 0) return [...layers, layer2];
+        return [...layers.slice(0, i), layer2, ...layers.slice(i + 1)];
+      });
+    },
+    [layerMap, overriddenLayers],
+  );
+
+  const deleteLayer = useCallback(
+    (...ids: string[]) => {
+      const selectedId = ids.find(id => id === selectedLayerId?.layerId);
+      if (selectedId) {
+        // Reset selected layer
+        select();
+      }
+      setTempLayers(layers => {
+        const deleted: Layer[] = [];
+        const newLayers = filterLayers(layers, l => {
+          if (ids.includes(l.id)) {
+            deleted.push(l);
+            return true;
+          }
+          return false;
+        });
+        deleted
+          .map(l => l.id)
+          .forEach(id => {
+            layerMap.delete(id);
+            atomMap.delete(id);
+            lazyLayerMap.delete(id);
+            showLayer(id);
+          });
+        tempLayersRef.current = tempLayersRef.current.filter(
+          l => !deleted.find(ll => ll.id === l.id),
+        );
+        return newLayers;
+      });
+    },
+    [layerMap, atomMap, lazyLayerMap, showLayer, select, selectedLayerId],
+  );
+
+  const isLayer = useCallback(
+    (obj: any): obj is LazyLayer => {
+      return typeof obj === "object" && Object.getPrototypeOf(obj) === lazyLayerPrototype;
+    },
+    [lazyLayerPrototype],
+  );
+
+  const rootLayers = useCallback(() => {
+    return [...(layersRef() ?? []), ...tempLayersRef.current]
+      .map(l => findById(l.id))
+      .filter((l): l is LazyLayer => !!l);
+  }, [findById, layersRef]);
+
+  const walk = useCallback(
+    <T>(fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => T | void): T | undefined => {
+      return walkLayers([...(layersRef() ?? []), ...tempLayersRef.current], (l, i, p) => {
+        const ll = findById(l.id);
+        if (!ll) return;
+        return fn(
+          ll,
+          i,
+          p.map(l => findById(l.id)).filter((l): l is LazyLayer => !!l),
+        );
+      });
+    },
+    [findById, layersRef],
+  );
+
+  const find = useCallback(
+    (
+      fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean,
+    ): LazyLayer | undefined => {
+      return walk((...args) => (fn(...args) ? args[0] : undefined));
+    },
+    [walk],
+  );
+
+  const findAll = useCallback(
+    (fn: (layer: LazyLayer, index: number, parents: LazyLayer[]) => boolean): LazyLayer[] => {
+      const res: LazyLayer[] = [];
+      walk((...args) => {
+        if (fn(...args)) res.push(args[0]);
+      });
+      return res;
+    },
+    [walk],
+  );
+
+  const findByTags = useCallback(
+    (...tagIds: string[]): LazyLayer[] => {
+      return findAll(
+        l =>
+          !!l.tags?.some(
+            t => tagIds.includes(t.id) || !!t.tags?.some(tt => tagIds.includes(tt.id)),
+          ),
+      );
+    },
+    [findAll],
+  );
+
+  const findByTagLabels = useCallback(
+    (...tagLabels: string[]): LazyLayer[] => {
+      return findAll(
+        l =>
+          !!l.tags?.some(
+            t => tagLabels.includes(t.label) || !!t.tags?.some(tt => tagLabels.includes(tt.label)),
+          ),
+      );
+    },
+    [findAll],
+  );
+
+  const hideLayers = useCallback(
+    (...layers: string[]) => {
+      for (const l of layers) {
+        hideLayer(l);
+      }
+    },
+    [hideLayer],
+  );
+
+  const showLayers = useCallback(
+    (...layers: string[]) => {
+      for (const l of layers) {
+        showLayer(l);
+      }
+    },
+    [showLayer],
+  );
+
+  const overriddenLayersRef = useCallback(() => overriddenLayers, [overriddenLayers]);
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      findById,
+      add,
+      addAll,
+      replace,
+      override,
+      deleteLayer,
+      findByIds,
+      isLayer,
+      layers: rootLayers,
+      walk,
+      find,
+      findAll,
+      findByTags,
+      findByTagLabels,
+      hide: hideLayers,
+      show: showLayers,
+      select,
+      selectedLayer,
+      overriddenLayers: overriddenLayersRef,
+    }),
+    [
+      findById,
+      add,
+      addAll,
+      replace,
+      override,
+      deleteLayer,
+      findByIds,
+      isLayer,
+      rootLayers,
+      walk,
+      find,
+      findAll,
+      findByTags,
+      findByTagLabels,
+      hideLayers,
+      showLayers,
+      select,
+      selectedLayer,
+      overriddenLayersRef,
+    ],
+  );
+
+  useLayoutEffect(() => {
+    const ids = new Set<string>();
+
+    walkLayers(layers ?? [], l => {
+      ids.add(l.id);
+      if (!atomMap.has(l.id)) {
+        atomMap.set(l.id, computeAtom());
+      }
+      layerMap.set(l.id, l);
+    });
+
+    const deleted = Array.from(atomMap.keys()).filter(k => !ids.has(k));
+    deleted.forEach(k => {
+      atomMap.delete(k);
+      layerMap.delete(k);
+      lazyLayerMap.delete(k);
+      showLayer(k);
+    });
+    setOverridenLayers(layers => layers.filter(l => !deleted.includes(l.id)));
+  }, [atomMap, layers, layerMap, lazyLayerMap, setOverridenLayers, showLayer]);
+
+  return { atomMap, flattenedLayers, isHidden };
+}
+
+function flattenLayers(layers: Layer[]): Layer[] {
+  return layers.flatMap(l =>
+    l.type === "group" && Array.isArray(l.children) ? flattenLayers(l.children) : [l],
+  );
+}
+
+function walkLayers<T>(
+  layers: Layer[],
+  cb: (layer: Layer, i: number, parent: Layer[]) => T | void,
+): T | undefined {
+  for (let i = 0; i < layers.length; i++) {
+    const l = layers[i];
+    const res = cb(l, i, layers);
+    if (typeof res !== "undefined") {
+      return res;
+    }
+    if (l.type === "group" && Array.isArray(l.children)) {
+      const res = walkLayers(l.children, cb);
+      if (typeof res !== "undefined") {
+        return res;
+      }
+    }
+  }
+  return;
+}
+
+function replaceLayers(
+  layers: Layer[],
+  cb: (layer: Layer, i: number, parent: Layer[]) => Layer | void,
+): Layer[] {
+  for (let i = 0; i < layers.length; i++) {
+    const l = layers[i];
+    const nl = cb(l, i, layers);
+    if (nl) {
+      layers[i] = nl;
+    }
+    if (l.type === "group" && Array.isArray(l.children)) {
+      l.children = replaceLayers(l.children, cb);
+    }
+  }
+  return layers;
+}
+
+function filterLayers(
+  layers: Layer[],
+  cb: (layer: Layer, i: number, parent: Layer[]) => boolean,
+): Layer[] {
+  const newLayers: Layer[] = [];
+  for (let i = 0; i < layers.length; i++) {
+    const l = layers[i];
+    if (!cb(l, i, layers)) {
+      newLayers.push(l);
+    }
+    if (l.type === "group" && Array.isArray(l.children)) {
+      l.children = filterLayers(l.children, cb);
+    }
+  }
+  return newLayers;
+}
+
+function isValidLayer(l: unknown): l is Layer {
+  return !!l && typeof l === "object" && ("type" in l || "extensionId" in l);
+}
+
+function compat(layer: unknown): Layer | undefined {
+  if (!layer || typeof layer !== "object") return;
+  return "extensionId" in layer || "property" in layer
+    ? convertLegacyLayer(layer as any)
+    : (layer as Layer);
+}
+
+function useSelection({
+  flattenedLayers,
+  selectedLayerId: initialSelectedLayerId,
+  selectedReason: initialSelectedReason,
+  getLazyLayer,
+  onLayerSelect,
+}: {
+  flattenedLayers?: Layer[];
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  selectedReason?: LayerSelectionReason;
+  getLazyLayer: (layerId: string) => LazyLayer | undefined;
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId: string | undefined,
+    layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+    reason: LayerSelectionReason | undefined,
+    info: SelectedFeatureInfo | undefined,
+  ) => void;
+}) {
+  const [[selectedLayerId, selectedReason, selectedFeatureInfo], setSelectedLayer] = useState<
+    [
+      { layerId?: string; featureId?: string } | undefined,
+      LayerSelectionReason | undefined,
+      SelectedFeatureInfo | undefined,
+    ]
+  >([initialSelectedLayerId, initialSelectedReason, undefined]);
+
+  useEffect(() => {
+    setSelectedLayer(s => {
+      return initialSelectedLayerId
+        ? s[0]?.layerId !== initialSelectedLayerId.layerId || !isEqual(s[1], initialSelectedReason)
+          ? [initialSelectedLayerId, initialSelectedReason, undefined]
+          : s
+        : !s[0]?.layerId && !s[1]
+        ? s
+        : s;
+    });
+  }, [initialSelectedLayerId, initialSelectedReason]);
+
+  const selectedLayerForRef = useCallback(() => {
+    return selectedLayerId?.layerId ? getLazyLayer(selectedLayerId.layerId) : undefined;
+  }, [getLazyLayer, selectedLayerId]);
+
+  useEffect(() => {
+    const actualSelectedLayer = selectedLayerForRef();
+    onLayerSelect?.(
+      actualSelectedLayer?.id,
+      selectedLayerId?.featureId,
+      actualSelectedLayer
+        ? () =>
+            new Promise(resolve => {
+              // Wait until computed feature is ready
+              queueMicrotask(() => {
+                resolve(actualSelectedLayer?.computed);
+              });
+            })
+        : undefined,
+      selectedReason,
+      selectedFeatureInfo,
+    );
+  }, [onLayerSelect, selectedLayerId, selectedReason, selectedLayerForRef, selectedFeatureInfo]);
+
+  useEffect(() => {
+    setSelectedLayer(s =>
+      s[0]?.layerId && flattenedLayers?.find(l => l.id === s[0]?.layerId)
+        ? [{ ...s[0] }, s[1], s[2]] // Force update when flattenedLayers are updated
+        : !s[0]?.layerId && !s[1]
+        ? s
+        : [undefined, undefined, undefined],
+    );
+  }, [flattenedLayers]);
+
+  const select = useCallback(
+    (
+      layerId?: unknown,
+      featureId?: unknown,
+      options?: LayerSelectionReason,
+      info?: SelectedFeatureInfo,
+    ) => {
+      if (typeof layerId === "string")
+        setSelectedLayer([
+          {
+            layerId: layerId || undefined,
+            featureId: typeof featureId === "string" ? featureId || undefined : undefined,
+          },
+          options,
+          info,
+        ]);
+      else if (options) setSelectedLayer(s => [s[0], options, info]);
+      else setSelectedLayer(s => (!s[0] && !s[1] && !s[2] ? s : [undefined, undefined, undefined]));
+    },
+    [],
+  );
+
+  return {
+    selectedLayer: selectedLayerForRef,
+    select,
+  };
+}
diff --git a/web/src/beta/core/Map/Layers/index.test.tsx b/web/src/beta/core/Map/Layers/index.test.tsx
new file mode 100644
index 0000000000..2f7321b7e3
--- /dev/null
+++ b/web/src/beta/core/Map/Layers/index.test.tsx
@@ -0,0 +1,184 @@
+import { useEffect, useRef, useState } from "react";
+import { expect, test, vi } from "vitest";
+
+import { render, screen, waitFor } from "@reearth/test/utils";
+
+import Component, { LayerSimple, Layer, FeatureComponentProps, Ref } from ".";
+
+test("simple", () => {
+  const Feature = vi.fn((_: FeatureComponentProps) => <div>Hello</div>);
+  const layers: LayerSimple[] = [
+    { id: "a", type: "simple" },
+    { id: "b", type: "simple" },
+  ];
+  const { rerender } = render(<Component layers={layers} Feature={Feature} />);
+
+  expect(screen.getAllByText("Hello")[0]).toBeVisible();
+  expect(screen.getAllByText("Hello")).toHaveLength(2);
+  expect(Feature).toBeCalledTimes(2);
+  expect(Feature.mock.calls[0][0]).toEqual({
+    isHidden: false,
+    isSelected: false,
+    layer: {
+      id: "a",
+      features: [],
+      layer: layers[0],
+      status: "ready",
+      originalFeatures: [],
+    },
+    onFeatureDelete: expect.any(Function),
+    onFeatureFetch: expect.any(Function),
+    onComputedFeatureFetch: expect.any(Function),
+    onComputedFeatureDelete: expect.any(Function),
+    onFeatureRequest: expect.any(Function),
+    evalFeature: expect.any(Function),
+  });
+  expect(Feature.mock.calls[1][0]).toEqual({
+    isHidden: false,
+    isSelected: false,
+    layer: {
+      id: "b",
+      features: [],
+      layer: layers[1],
+      status: "ready",
+      originalFeatures: [],
+    },
+    onFeatureDelete: expect.any(Function),
+    onFeatureFetch: expect.any(Function),
+    onComputedFeatureFetch: expect.any(Function),
+    onComputedFeatureDelete: expect.any(Function),
+    onFeatureRequest: expect.any(Function),
+    evalFeature: expect.any(Function),
+  });
+
+  Feature.mockClear();
+
+  const layers2: LayerSimple[] = [{ id: "c", type: "simple" }];
+  rerender(<Component layers={layers2} Feature={Feature} />);
+  expect(screen.getByText("Hello")).toBeVisible();
+  expect(Feature.mock.calls[0][0].layer).toEqual({
+    id: "c",
+    features: [],
+    layer: layers2[0],
+    status: "ready",
+    originalFeatures: [],
+  });
+});
+
+test("tree", () => {
+  const Feature = vi.fn((_: FeatureComponentProps) => null);
+  const layers: Layer[] = [
+    {
+      id: "a",
+      type: "group",
+      children: [
+        { id: "b", type: "simple" },
+        { id: "c", type: "group", children: [] },
+      ],
+    },
+  ];
+  render(<Component layers={layers} Feature={Feature} />);
+
+  expect(Feature).toBeCalledTimes(1);
+  expect(Feature.mock.calls[0][0].layer).toEqual({
+    id: "b",
+    features: [],
+    layer: { id: "b", type: "simple" },
+    status: "ready",
+    originalFeatures: [],
+  });
+});
+
+test("ref", async () => {
+  const Feature = vi.fn((_: FeatureComponentProps) => null);
+
+  function Comp({ del, replace }: { del?: boolean; replace?: boolean }) {
+    const ref = useRef<Ref>(null);
+    const layerId = useRef("");
+    const [s, ss] = useState("");
+
+    useEffect(() => {
+      if (del) {
+        ref.current?.deleteLayer(layerId.current);
+        ss(ref.current?.findById(layerId.current)?.title ?? "");
+      } else if (replace) {
+        ref.current?.replace({ id: layerId.current, type: "simple", title: "A" });
+        ss(ref.current?.findById(layerId.current)?.title ?? "");
+      } else {
+        const newLayer = ref.current?.add({ type: "simple", title: "a" });
+        layerId.current = newLayer?.id ?? "";
+        ss(newLayer?.title ?? "");
+      }
+    }, [del, replace]);
+
+    return (
+      <>
+        <Component ref={ref} Feature={Feature} />
+        <p data-testid="layer">{s}</p>
+      </>
+    );
+  }
+
+  // add should add layers and getLayer should return a lazy layer
+  const { rerender } = render(<Comp />);
+
+  await waitFor(() => expect(screen.getByTestId("layer")).toHaveTextContent("a"));
+
+  expect(Feature).toBeCalledTimes(1);
+  expect(Feature.mock.calls[0][0].layer).toEqual({
+    id: expect.any(String),
+    features: [],
+    layer: { id: expect.any(String), type: "simple", title: "a" },
+    status: "ready",
+    originalFeatures: [],
+  });
+
+  // update should update the layer
+  rerender(<Comp replace />);
+
+  await waitFor(() => expect(screen.getByTestId("layer")).toHaveTextContent("A"));
+
+  // deleteLayer should delete the layer and getLayer should return nothing
+  rerender(<Comp del />);
+
+  await waitFor(() => expect(screen.getByTestId("layer")).toBeEmptyDOMElement());
+});
+
+test("computed", async () => {
+  const layers: Layer[] = [
+    {
+      id: "x",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [0, 1],
+          },
+        },
+      },
+      properties: {},
+      marker: {
+        pointColor: "red",
+      },
+    },
+  ];
+
+  const Feature = (_: FeatureComponentProps) => null;
+
+  function Comp({ layers }: { layers?: Layer[] }) {
+    const ref = useRef<Ref>(null);
+    return (
+      <>
+        <Component layers={layers} ref={ref} Feature={Feature} />
+        <p data-testid="layer">{ref.current?.findById("x")?.computed?.id}</p>
+      </>
+    );
+  }
+
+  const { rerender } = render(<Comp layers={layers} />);
+  rerender(<Comp layers={layers} />);
+  await waitFor(() => expect(screen.getByTestId("layer")).toHaveTextContent("x"));
+});
diff --git a/web/src/beta/core/Map/Layers/index.tsx b/web/src/beta/core/Map/Layers/index.tsx
new file mode 100644
index 0000000000..467f4142e9
--- /dev/null
+++ b/web/src/beta/core/Map/Layers/index.tsx
@@ -0,0 +1,74 @@
+import { forwardRef, type ForwardRefRenderFunction } from "react";
+
+import { SelectedFeatureInfo } from "@reearth/beta/core/mantle";
+
+import ClusteredLayers, { type Props as ClusteredLayerProps } from "../ClusteredLayers";
+import type { ComputedLayer } from "../types";
+
+import useHooks, { LayerSelectionReason, type Ref } from "./hooks";
+
+export type {
+  CommonProps,
+  FeatureComponentProps,
+  FeatureComponentType,
+  Layer,
+  LayerSimple,
+  EvalFeature,
+} from "../Layer";
+export type {
+  LazyLayer,
+  Ref,
+  NaiveLayer,
+  LayerSelectionReason,
+  DefaultInfobox,
+  OverriddenLayer,
+} from "./hooks";
+export type {
+  ClusterComponentType,
+  ClusterComponentProps,
+  ClusterProperty,
+  Cluster,
+} from "../ClusteredLayers";
+
+export type Props = Omit<ClusteredLayerProps, "atomMap" | "isHidden"> & {
+  hiddenLayers?: string[];
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  selectionReason?: LayerSelectionReason;
+  sceneProperty?: any;
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId: string | undefined,
+    layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+    reason: LayerSelectionReason | undefined,
+    info: SelectedFeatureInfo | undefined,
+  ) => void;
+};
+
+const Layers: ForwardRefRenderFunction<Ref, Props> = (
+  { layers, hiddenLayers, selectedLayerId, selectionReason, onLayerSelect, ...props },
+  ref,
+) => {
+  const { atomMap, flattenedLayers, isHidden } = useHooks({
+    layers,
+    ref,
+    hiddenLayers,
+    selectedLayerId,
+    selectionReason,
+    onLayerSelect,
+  });
+
+  return (
+    <ClusteredLayers
+      {...props}
+      selectedLayerId={selectedLayerId}
+      layers={flattenedLayers}
+      atomMap={atomMap}
+      isHidden={isHidden}
+    />
+  );
+};
+
+export default forwardRef(Layers);
diff --git a/web/src/beta/core/Map/Layers/keys.ts b/web/src/beta/core/Map/Layers/keys.ts
new file mode 100644
index 0000000000..9b12b26de2
--- /dev/null
+++ b/web/src/beta/core/Map/Layers/keys.ts
@@ -0,0 +1,50 @@
+import { appearanceKeyObj } from "../../mantle";
+import type { LegacyLayer, ComputedLayer, Layer } from "../../mantle";
+
+import type { LazyLayer } from "./hooks";
+
+export const layerKeys = objKeys<
+  Exclude<KeysOfUnion<Layer | LegacyLayer | LazyLayer>, "id" | "compat">
+>({
+  // layer
+  children: 1,
+  data: 1,
+  infobox: 1,
+  properties: 1,
+  tags: 1,
+  title: 1,
+  type: 1,
+  creator: 1,
+  computed: 1,
+  defines: 1,
+  // appearance
+  ...appearanceKeyObj,
+  // legacy layer
+  property: 1,
+  propertyId: 1,
+  pluginId: 1,
+  extensionId: 1,
+  isVisible: 1,
+  visible: 1,
+  events: 1,
+});
+
+export const computedLayerKeys = objKeys<Exclude<KeysOfUnion<ComputedLayer>, "id">>({
+  features: 1,
+  layer: 1,
+  originalFeatures: 1,
+  properties: 1,
+  status: 1,
+  ...appearanceKeyObj,
+});
+
+export type KeysOfUnion<T> = T extends T ? keyof T : never;
+
+/**
+ * Often we want to make an array of keys of an object type,
+ * but if we just specify the key names directly, we may forget to change the array if the object type is changed.
+ * With this function, the compiler checks the object keys for completeness, so the array of keys is always up to date.
+ */
+export function objKeys<T extends string | number | symbol>(obj: { [k in T]: 1 }): T[] {
+  return Object.keys(obj) as T[];
+}
diff --git a/web/src/beta/core/Map/Layers/utils.test.ts b/web/src/beta/core/Map/Layers/utils.test.ts
new file mode 100644
index 0000000000..2f385d8699
--- /dev/null
+++ b/web/src/beta/core/Map/Layers/utils.test.ts
@@ -0,0 +1,53 @@
+import { expect, test } from "vitest";
+
+import { deepAssign } from "./utils";
+
+test("deepAssign", () => {
+  expect(
+    deepAssign(
+      { marker: { color: "red", size: 100 } },
+      { marker: { color: "blue", image: "example.com" } },
+    ),
+  ).toEqual({ marker: { color: "blue", size: 100, image: "example.com" } });
+
+  expect(
+    deepAssign({ marker: { color: "red", size: 100 } }, { marker: { color: undefined } }),
+  ).toEqual({ marker: { size: 100 } });
+
+  expect(deepAssign({ marker: { color: "red", size: 100 } }, { marker: undefined })).toEqual({});
+
+  expect(
+    deepAssign(
+      { marker: { color: "red", size: 100 }, test: { value: ["abc"] } },
+      { marker: undefined },
+    ),
+  ).toEqual({
+    test: { value: ["abc"] },
+  });
+
+  expect(
+    deepAssign(
+      {
+        marker: { color: "red", size: 100, deep: { value: { a: "abc" } } },
+        test: { value: ["abc"] },
+      },
+      { marker: { deep: { value: { b: "def" } } } },
+    ),
+  ).toEqual({
+    marker: { color: "red", size: 100, deep: { value: { a: "abc", b: "def" } } },
+    test: { value: ["abc"] },
+  });
+
+  expect(
+    deepAssign(
+      {
+        marker: { color: "red", size: 100, deep: { value: { a: "abc" } } },
+        test: { value: ["abc"] },
+      },
+      { marker: {} },
+    ),
+  ).toEqual({
+    marker: {},
+    test: { value: ["abc"] },
+  });
+});
diff --git a/web/src/beta/core/Map/Layers/utils.ts b/web/src/beta/core/Map/Layers/utils.ts
new file mode 100644
index 0000000000..98dcee33ec
--- /dev/null
+++ b/web/src/beta/core/Map/Layers/utils.ts
@@ -0,0 +1,37 @@
+import { isArray, isObject } from "lodash-es";
+
+export const deepAssign = <O extends Record<string, any>>(obj: O, src: O) => {
+  return Object.fromEntries(
+    Object.entries({ ...src, ...obj })
+      .map(([k, v]): [string, any] | undefined => {
+        const srcV: unknown = src[k];
+        if (Object.hasOwn(src, k) && (srcV === undefined || srcV === null)) {
+          return undefined;
+        }
+
+        if (srcV === undefined) {
+          return [k, v];
+        }
+
+        if (isArray(srcV)) {
+          return [k, srcV];
+        }
+
+        if (
+          isObject(v) &&
+          Object.keys(v).length !== 0 &&
+          isObject(srcV) &&
+          Object.keys(srcV).length !== 0
+        ) {
+          return [k, deepAssign(v, srcV)];
+        }
+
+        if (v !== srcV) {
+          return [k, srcV];
+        }
+
+        return [k, v];
+      })
+      .filter((v): v is [string, any] => !!v),
+  ) as O;
+};
diff --git a/web/src/beta/core/Map/hooks.ts b/web/src/beta/core/Map/hooks.ts
new file mode 100644
index 0000000000..b65de1e1b7
--- /dev/null
+++ b/web/src/beta/core/Map/hooks.ts
@@ -0,0 +1,99 @@
+import { useImperativeHandle, useRef, type Ref, useState, useCallback, useEffect } from "react";
+
+import { SelectedFeatureInfo } from "../mantle";
+
+import { type MapRef, mapRef } from "./ref";
+import type { EngineRef, LayersRef, LayerSelectionReason, ComputedLayer } from "./types";
+
+export type { MapRef } from "./ref";
+
+export default function ({
+  ref,
+  onLayerSelect,
+}: {
+  ref: Ref<MapRef>;
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId: string | undefined,
+    layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+    options?: LayerSelectionReason,
+    info?: SelectedFeatureInfo,
+  ) => void;
+}) {
+  const engineRef = useRef<EngineRef>(null);
+  const layersRef = useRef<LayersRef>(null);
+
+  useImperativeHandle(
+    ref,
+    () =>
+      mapRef({
+        engineRef,
+        layersRef,
+      }),
+    [],
+  );
+
+  // Order in which selectedLayerId prop propagates from the outside: Map -> Layers -> Engine
+  // 1. selectedLayerId prop on Map component
+  // 2. selectedLayerId prop on Layer component
+  // 3. onLayerSelect event on Layer component
+  // 4. handleLayerSelect fucntion
+  // 5. selectedLayer state
+  // 6. selectedLayerId prop on Engine component, onLayerSelect event on Layer component
+  // 7. onLayerSelect event on Map component
+
+  const [selectedLayer, selectLayer] = useState<{
+    layerId?: string;
+    featureId?: string;
+    layer?: ComputedLayer;
+    reason?: LayerSelectionReason;
+    info?: SelectedFeatureInfo;
+  }>({});
+
+  const handleLayerSelect = useCallback(
+    async (
+      layerId: string | undefined,
+      featureId: string | undefined,
+      layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+      reason?: LayerSelectionReason,
+      info?: SelectedFeatureInfo,
+    ) => {
+      selectLayer({ layerId, featureId, layer: await layer?.(), reason, info });
+    },
+    [],
+  );
+
+  const handleEngineLayerSelect = useCallback(
+    (
+      layerId: string | undefined,
+      featureId?: string,
+      reason?: LayerSelectionReason,
+      info?: SelectedFeatureInfo,
+    ) => {
+      layersRef.current?.select(layerId, featureId, reason, info);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    onLayerSelect?.(
+      selectedLayer.layerId,
+      selectedLayer.featureId,
+      async () => selectedLayer.layer,
+      selectedLayer.reason,
+      selectedLayer.info,
+    );
+  }, [onLayerSelect, selectedLayer]);
+
+  return {
+    engineRef,
+    layersRef,
+    selectedLayer,
+    handleLayerSelect,
+    handleEngineLayerSelect,
+  };
+}
diff --git a/web/src/beta/core/Map/index.tsx b/web/src/beta/core/Map/index.tsx
new file mode 100644
index 0000000000..430e651745
--- /dev/null
+++ b/web/src/beta/core/Map/index.tsx
@@ -0,0 +1,94 @@
+import { forwardRef, useMemo, type Ref } from "react";
+
+import useHooks, { MapRef } from "./hooks";
+import Layers, { type Props as LayersProps } from "./Layers";
+import type { Engine, EngineProps } from "./types";
+
+export * from "./types";
+export { useGet, type WrappedRef, type Undefinable, useOverriddenProperty } from "./utils";
+
+export type {
+  NaiveLayer,
+  LazyLayer,
+  FeatureComponentType,
+  FeatureComponentProps,
+  ClusterProperty,
+  Layer,
+  LayerSelectionReason,
+  Cluster,
+  EvalFeature,
+  DefaultInfobox,
+  OverriddenLayer,
+} from "./Layers";
+
+export type { MapRef as Ref } from "./hooks";
+
+export type Props = {
+  engines?: Record<string, Engine>;
+  engine?: string;
+} & Omit<LayersProps, "Feature" | "clusterComponent" | "selectionReason" | "delegatedDataTypes"> &
+  Omit<EngineProps, "selectionReason" | "onLayerSelect">;
+
+function Map(
+  {
+    engines,
+    engine,
+    isBuilt,
+    isEditable,
+    clusters,
+    hiddenLayers,
+    layers,
+    overrides,
+    selectedLayerId,
+    layerSelectionReason,
+    onLayerSelect,
+    ...props
+  }: Props,
+  ref: Ref<MapRef>,
+): JSX.Element | null {
+  const currentEngine = engine ? engines?.[engine] : undefined;
+  const Engine = currentEngine?.component;
+  const { engineRef, layersRef, selectedLayer, handleLayerSelect, handleEngineLayerSelect } =
+    useHooks({
+      ref,
+      selectedLayerId,
+      onLayerSelect,
+    });
+
+  const selectedLayerIdForEngine = useMemo(
+    () => ({ layerId: selectedLayer.layerId, featureId: selectedLayer.featureId }),
+    [selectedLayer.featureId, selectedLayer.layerId],
+  );
+
+  return Engine ? (
+    <Engine
+      ref={engineRef}
+      isBuilt={isBuilt}
+      isEditable={isEditable}
+      selectedLayerId={selectedLayerIdForEngine}
+      layerSelectionReason={selectedLayer.reason}
+      onLayerSelect={handleEngineLayerSelect}
+      layersRef={layersRef}
+      {...props}>
+      <Layers
+        ref={layersRef}
+        clusters={clusters}
+        hiddenLayers={hiddenLayers}
+        isBuilt={isBuilt}
+        isEditable={isEditable}
+        layers={layers}
+        overrides={overrides}
+        selectedLayerId={selectedLayerId}
+        selectionReason={layerSelectionReason}
+        Feature={currentEngine?.featureComponent}
+        clusterComponent={currentEngine?.clusterComponent}
+        delegatedDataTypes={currentEngine.delegatedDataTypes}
+        meta={props.meta}
+        sceneProperty={props.property}
+        onLayerSelect={handleLayerSelect}
+      />
+    </Engine>
+  ) : null;
+}
+
+export default forwardRef(Map);
diff --git a/web/src/beta/core/Map/ref.ts b/web/src/beta/core/Map/ref.ts
new file mode 100644
index 0000000000..5f683f3533
--- /dev/null
+++ b/web/src/beta/core/Map/ref.ts
@@ -0,0 +1,97 @@
+import type { RefObject } from "react";
+
+import type { EngineRef, LayersRef } from "./types";
+import { FunctionKeys, WrappedRef, wrapRef } from "./utils";
+
+export type MapRef = {
+  engine: WrappedRef<EngineRef>;
+  layers: WrappedRef<LayersRef>;
+};
+
+const engineRefKeys: FunctionKeys<EngineRef> = {
+  captureScreen: 1,
+  changeSceneMode: 1,
+  changeSpeed: 1,
+  changeTime: 1,
+  enableScreenSpaceCameraController: 1,
+  flyTo: 1,
+  flyToGround: 1,
+  getCamera: 1,
+  getClock: 1,
+  getLocationFromScreen: 1,
+  sampleTerrainHeight: 1,
+  getViewport: 1,
+  lookAt: 1,
+  lookAtLayer: 1,
+  lookHorizontal: 1,
+  lookVertical: 1,
+  moveBackward: 1,
+  moveDown: 1,
+  moveForward: 1,
+  moveLeft: 1,
+  moveOverTerrain: 1,
+  moveRight: 1,
+  moveUp: 1,
+  onClick: 1,
+  onDoubleClick: 1,
+  onMiddleClick: 1,
+  onMiddleDown: 1,
+  onMiddleUp: 1,
+  onMouseDown: 1,
+  onMouseEnter: 1,
+  onMouseLeave: 1,
+  onMouseMove: 1,
+  onMouseUp: 1,
+  onRightClick: 1,
+  onRightDown: 1,
+  onRightUp: 1,
+  onWheel: 1,
+  orbit: 1,
+  pause: 1,
+  play: 1,
+  requestRender: 1,
+  rotateRight: 1,
+  tick: 1,
+  zoomIn: 1,
+  zoomOut: 1,
+  changeStart: 1,
+  changeStop: 1,
+  inViewport: 1,
+  onTick: 1,
+  removeTickEventListener: 1,
+};
+
+const layersRefKeys: FunctionKeys<LayersRef> = {
+  add: 1,
+  addAll: 1,
+  deleteLayer: 1,
+  find: 1,
+  findAll: 1,
+  findById: 1,
+  findByIds: 1,
+  findByTagLabels: 1,
+  findByTags: 1,
+  hide: 1,
+  isLayer: 1,
+  layers: 1,
+  override: 1,
+  replace: 1,
+  select: 1,
+  selectedLayer: 1,
+  show: 1,
+  walk: 1,
+  overriddenLayers: 1,
+};
+
+export function mapRef({
+  engineRef,
+  layersRef,
+}: {
+  engineRef: RefObject<EngineRef>;
+  layersRef: RefObject<LayersRef>;
+}): MapRef {
+  return {
+    engine: wrapRef(engineRef, engineRefKeys),
+    layers: wrapRef(layersRef, layersRefKeys),
+  };
+}
diff --git a/web/src/beta/core/Map/types/event.ts b/web/src/beta/core/Map/types/event.ts
new file mode 100644
index 0000000000..2ca1455bce
--- /dev/null
+++ b/web/src/beta/core/Map/types/event.ts
@@ -0,0 +1,104 @@
+import EventTarget from "@ungap/event-target";
+
+export type EventCallback<T extends any[] = any[]> = (...args: T) => void;
+export type EventEmitter<E extends { [P in string]: any[] } = { [P in string]: any[] }> = <
+  T extends keyof E,
+>(
+  type: T,
+  ...args: E[T]
+) => void;
+
+export type Events<E extends { [P in string]: any[] } = { [P in string]: any[] }> = {
+  readonly on: <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => void;
+  readonly off: <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => void;
+  readonly once: <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => void;
+};
+
+export function events<E extends { [P in string]: any[] } = { [P in string]: any[] }>(): [
+  Events<E>,
+  EventEmitter<E>,
+] {
+  const e = new EventTarget();
+  const callbacks = new Map<keyof E, Map<EventCallback<E[keyof E]>, (e: Event) => void>>();
+  const getEventCallback = <T extends keyof E>(
+    type: T,
+    cb: EventCallback<E[T]>,
+  ): ((e: Event) => void) => {
+    let ecbs = callbacks.get(type);
+    if (!ecbs) {
+      ecbs = new Map();
+      callbacks.set(type, ecbs);
+    }
+
+    let ecb = ecbs.get(cb as EventCallback);
+    if (!ecb) {
+      ecb = (e: Event): void => {
+        cb(...(e as CustomEvent).detail);
+      };
+      ecbs.set(cb as EventCallback, ecb);
+    }
+
+    return ecb;
+  };
+  const deleteEventCallback = (type: keyof E, cb: EventCallback): void => {
+    callbacks.get(type)?.delete(cb);
+  };
+
+  const on = <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => {
+    const ecb = getEventCallback(type, callback);
+    e.addEventListener(String(type), ecb);
+  };
+  const off = <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => {
+    const ecb = getEventCallback(type, callback);
+    e.removeEventListener(String(type), ecb);
+    deleteEventCallback(type, ecb);
+  };
+  const once = <T extends keyof E>(type: T, callback: EventCallback<E[T]>) => {
+    const ecb = getEventCallback(type, callback);
+    e.addEventListener(String(type), ecb, { once: true });
+  };
+
+  const events = {
+    get on() {
+      return on;
+    },
+    get off() {
+      return off;
+    },
+    get once() {
+      return once;
+    },
+  };
+
+  return [
+    events,
+    <T extends keyof E>(type: T, ...args: E[T]) =>
+      e.dispatchEvent(new CustomEvent(String(type), { detail: args })),
+  ];
+}
+
+export function mergeEvents<E extends { [x: string]: any[] } = { [x: string]: any[] }>(
+  source: Events<E>,
+  dest: EventEmitter<E>,
+  types: (keyof E)[],
+): () => void {
+  const cbs = types.reduce<{ [T in keyof E]: EventCallback<E[T]> }>(
+    (a, b) => ({
+      ...a,
+      [b]: (...args: E[typeof b]) => {
+        dest(b, ...args);
+      },
+    }),
+    {} as any,
+  );
+
+  for (const t of Object.keys(cbs)) {
+    source.on(t, cbs[t]);
+  }
+
+  return () => {
+    for (const t of Object.keys(cbs)) {
+      source.off(t, cbs[t]);
+    }
+  };
+}
diff --git a/web/src/beta/core/Map/types/index.ts b/web/src/beta/core/Map/types/index.ts
new file mode 100644
index 0000000000..79ebba3927
--- /dev/null
+++ b/web/src/beta/core/Map/types/index.ts
@@ -0,0 +1,336 @@
+import type {
+  ForwardRefExoticComponent,
+  PropsWithoutRef,
+  RefAttributes,
+  ReactNode,
+  CSSProperties,
+  RefObject,
+} from "react";
+
+import type {
+  LatLngHeight,
+  Camera,
+  Rect,
+  LatLng,
+  DataType,
+  SelectedFeatureInfo,
+} from "../../mantle";
+import type {
+  FeatureComponentType,
+  ClusterComponentType,
+  LayerSelectionReason,
+  Ref as LayersRef,
+} from "../Layers";
+
+export type {
+  FeatureComponentProps,
+  FeatureComponentType,
+  ClusterComponentType,
+  ClusterComponentProps,
+  ClusterProperty,
+  Ref as LayersRef,
+  LayerSelectionReason,
+} from "../Layers";
+export type {
+  Atom,
+  DataType,
+  DataRange,
+  Feature,
+  Layer,
+  LayerSimple,
+  ComputedFeature,
+  ComputedLayer,
+  Geometry,
+  AppearanceTypes,
+  Camera,
+  Typography,
+  LatLng,
+  Rect,
+  LatLngHeight,
+  ValueTypes,
+  ValueType,
+} from "../../mantle";
+export * from "./event";
+
+export type EngineRef = {
+  [index in keyof MouseEventHandles]: MouseEventHandles[index];
+} & {
+  name: string;
+  requestRender: () => void;
+  getViewport: () => Rect | undefined;
+  getCamera: () => Camera | undefined;
+  getLocationFromScreen: (x: number, y: number, withTerrain?: boolean) => LatLngHeight | undefined;
+  sampleTerrainHeight: (lng: number, lat: number) => Promise<number | undefined>;
+  flyTo: (target: string | FlyToDestination, options?: CameraOptions) => void;
+  lookAt: (destination: LookAtDestination, options?: CameraOptions) => void;
+  lookAtLayer: (layerId: string) => void;
+  zoomIn: (amount: number, options?: CameraOptions) => void;
+  zoomOut: (amount: number, options?: CameraOptions) => void;
+  orbit: (radians: number) => void;
+  rotateRight: (radians: number) => void;
+  changeSceneMode: (sceneMode: SceneMode | undefined, duration?: number) => void;
+  getClock: () => Clock | undefined;
+  captureScreen: (type?: string, encoderOptions?: number) => string | undefined;
+  enableScreenSpaceCameraController: (enabled: boolean) => void;
+  lookHorizontal: (amount: number) => void;
+  lookVertical: (amount: number) => void;
+  moveForward: (amount: number) => void;
+  moveBackward: (amount: number) => void;
+  moveUp: (amount: number) => void;
+  moveDown: (amount: number) => void;
+  moveLeft: (amount: number) => void;
+  moveRight: (amount: number) => void;
+  moveOverTerrain: (offset?: number) => void;
+  flyToGround: (destination: FlyToDestination, options?: CameraOptions, offset?: number) => void;
+  mouseEventCallbacks: MouseEvents;
+  pause: () => void;
+  play: () => void;
+  changeSpeed: (speed: number) => void;
+  changeStart: (start: Date) => void;
+  changeStop: (stop: Date) => void;
+  changeTime: (time: Date) => void;
+  tick: () => Date | void;
+  inViewport: (location?: LatLng) => boolean;
+  onTick: TickEvent;
+  tickEventCallback?: RefObject<TickEventCallback[]>;
+  removeTickEventListener: TickEvent;
+};
+
+export type EngineProps = {
+  className?: string;
+  style?: CSSProperties;
+  isEditable?: boolean;
+  isBuilt?: boolean;
+  property?: SceneProperty;
+  overriddenClock?: Clock;
+  camera?: Camera;
+  small?: boolean;
+  children?: ReactNode;
+  ready?: boolean;
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  layerSelectionReason?: LayerSelectionReason;
+  isLayerDraggable?: boolean;
+  isLayerDragging?: boolean;
+  shouldRender?: boolean;
+  meta?: Record<string, unknown>;
+  layersRef?: RefObject<LayersRef>;
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId?: string,
+    options?: LayerSelectionReason,
+    info?: SelectedFeatureInfo,
+  ) => void;
+  onCameraChange?: (camera: Camera) => void;
+  onLayerDrag?: (layerId: string, featureId: string | undefined, position: LatLng) => void;
+  onLayerDrop?: (
+    layerId: string,
+    featureId: string | undefined,
+    position: LatLng | undefined,
+  ) => void;
+  onLayerEdit?: (e: LayerEditEvent) => void;
+};
+
+export type LayerEditEvent = {
+  layerId: string | undefined;
+  scale?: { width: number; length: number; height: number; location: LatLngHeight };
+  rotate?: { heading: number; pitch: number; roll: number };
+};
+
+export type Clock = {
+  current?: Date;
+  start?: Date;
+  stop?: Date;
+  speed?: number;
+  playing?: boolean;
+};
+
+export type MouseEvent = {
+  x?: number;
+  y?: number;
+  lat?: number;
+  lng?: number;
+  height?: number;
+  layerId?: string;
+  delta?: number;
+};
+
+export type MouseEvents = {
+  click: ((props: MouseEvent) => void) | undefined;
+  doubleclick: ((props: MouseEvent) => void) | undefined;
+  mousedown: ((props: MouseEvent) => void) | undefined;
+  mouseup: ((props: MouseEvent) => void) | undefined;
+  rightclick: ((props: MouseEvent) => void) | undefined;
+  rightdown: ((props: MouseEvent) => void) | undefined;
+  rightup: ((props: MouseEvent) => void) | undefined;
+  middleclick: ((props: MouseEvent) => void) | undefined;
+  middledown: ((props: MouseEvent) => void) | undefined;
+  middleup: ((props: MouseEvent) => void) | undefined;
+  mousemove: ((props: MouseEvent) => void) | undefined;
+  mouseenter: ((props: MouseEvent) => void) | undefined;
+  mouseleave: ((props: MouseEvent) => void) | undefined;
+  wheel: ((props: MouseEvent) => void) | undefined;
+};
+
+export type TickEvent = (cb: TickEventCallback) => void;
+export type TickEventCallback = (current: Date, clock: { start: Date; stop: Date }) => void;
+
+export type MouseEventHandles = {
+  onClick: (fn: MouseEvents["click"]) => void;
+  onDoubleClick: (fn: MouseEvents["doubleclick"]) => void;
+  onMouseDown: (fn: MouseEvents["mousedown"]) => void;
+  onMouseUp: (fn: MouseEvents["mouseup"]) => void;
+  onRightClick: (fn: MouseEvents["rightclick"]) => void;
+  onRightDown: (fn: MouseEvents["rightdown"]) => void;
+  onRightUp: (fn: MouseEvents["rightup"]) => void;
+  onMiddleClick: (fn: MouseEvents["middleclick"]) => void;
+  onMiddleDown: (fn: MouseEvents["middledown"]) => void;
+  onMiddleUp: (fn: MouseEvents["middleup"]) => void;
+  onMouseMove: (fn: MouseEvents["mousemove"]) => void;
+  onMouseEnter: (fn: MouseEvents["mouseenter"]) => void;
+  onMouseLeave: (fn: MouseEvents["mouseleave"]) => void;
+  onWheel: (fn: MouseEvents["wheel"]) => void;
+};
+
+export type SceneMode = "3d" | "2d" | "columbus";
+export type IndicatorTypes = "default" | "crosshair" | "custom";
+
+export type FlyToDestination = {
+  /** Degrees */
+  lat?: number;
+  /** Degrees */
+  lng?: number;
+  /** Meters */
+  height?: number;
+  /** Radian */
+  heading?: number;
+  /** Radian */
+  pitch?: number;
+  /** Radian */
+  roll?: number;
+  /** Radian */
+  fov?: number;
+};
+
+export type LookAtDestination = {
+  /** Degrees */
+  lat?: number;
+  /** Degrees */
+  lng?: number;
+  /** Meters */
+  height?: number;
+  /** Radian */
+  heading?: number;
+  /** Radian */
+  pitch?: number;
+  /** Radian */
+  range?: number;
+  /** Radian */
+  fov?: number;
+};
+
+export type CameraOptions = {
+  /** Seconds */
+  duration?: number;
+  easing?: (time: number) => number;
+  withoutAnimation?: boolean;
+};
+
+export type TerrainProperty = {
+  terrain?: boolean;
+  terrainType?: "cesium" | "arcgis" | "cesiumion"; // default: cesium
+  terrainExaggeration?: number; // default: 1
+  terrainExaggerationRelativeHeight?: number; // default: 0
+  depthTestAgainstTerrain?: boolean;
+  terrainCesiumIonAsset?: string;
+  terrainCesiumIonAccessToken?: string;
+  terrainCesiumIonUrl?: string;
+  terrainUrl?: string;
+};
+
+export type SceneProperty = {
+  default?: {
+    camera?: Camera;
+    allowEnterGround?: boolean;
+    skybox?: boolean;
+    bgcolor?: string;
+    ion?: string;
+    sceneMode?: SceneMode; // default: scene3d
+    vr?: boolean;
+  } & TerrainProperty; // compat
+  cameraLimiter?: {
+    cameraLimitterEnabled?: boolean;
+    cameraLimitterShowHelper?: boolean;
+    cameraLimitterTargetArea?: Camera;
+    cameraLimitterTargetWidth?: number;
+    cameraLimitterTargetLength?: number;
+  };
+  indicator?: {
+    indicator_type: IndicatorTypes;
+    indicator_image?: string;
+    indicator_image_scale?: number;
+  };
+  tiles?: {
+    id: string;
+    tile_type?: string;
+    tile_url?: string;
+    tile_maxLevel?: number;
+    tile_minLevel?: number;
+    tile_opacity?: number;
+  }[];
+  terrain?: TerrainProperty;
+  atmosphere?: {
+    enable_sun?: boolean;
+    enable_lighting?: boolean;
+    ground_atmosphere?: boolean;
+    sky_atmosphere?: boolean;
+    shadows?: boolean;
+    fog?: boolean;
+    fog_density?: number;
+    brightness_shift?: number;
+    hue_shift?: number;
+    surturation_shift?: number;
+  };
+  timeline?: {
+    animation?: boolean;
+    visible?: boolean;
+    current?: string;
+    start?: string;
+    stop?: string;
+    stepType?: "rate" | "fixed";
+    multiplier?: number;
+    step?: number;
+    rangeType?: "unbounded" | "clamped" | "bounced";
+  };
+  googleAnalytics?: {
+    enableGA?: boolean;
+    trackingId?: string;
+  };
+  theme?: {
+    themeType?: "light" | "dark" | "forest" | "custom";
+    themeTextColor?: string;
+    themeSelectColor?: string;
+    themeBackgroundColor?: string;
+  };
+  light?: {
+    lightType?: "sunLight" | "directionalLight";
+    lightDirectionX?: number;
+    lightDirectionY?: number;
+    lightDirectionZ?: number;
+    lightColor?: string;
+    lightIntensity?: number;
+  };
+};
+
+export type EngineComponent = ForwardRefExoticComponent<
+  PropsWithoutRef<EngineProps> & RefAttributes<EngineRef>
+>;
+
+export type Engine = {
+  component: EngineComponent;
+  featureComponent: FeatureComponentType;
+  clusterComponent: ClusterComponentType;
+  delegatedDataTypes?: DataType[];
+};
diff --git a/web/src/beta/core/Map/utils.test.ts b/web/src/beta/core/Map/utils.test.ts
new file mode 100644
index 0000000000..307f16cfac
--- /dev/null
+++ b/web/src/beta/core/Map/utils.test.ts
@@ -0,0 +1,62 @@
+import { renderHook } from "@testing-library/react";
+import { expect, test } from "vitest";
+
+import { useGet, wrapRef } from "./utils";
+
+test("useGet", () => {
+  const obj = { a: 1 };
+  const { result } = renderHook(() => useGet(obj));
+  expect(result.current()).toBe(obj);
+  expect(result.current().a).toBe(1);
+
+  obj.a = 2;
+  expect(result.current()).toBe(obj);
+  expect(result.current().a).toBe(2);
+
+  const { result: result2, rerender: rerender2 } = renderHook(
+    props => {
+      return useGet(props);
+    },
+    {
+      initialProps: { b: 1 },
+    },
+  );
+  expect(result2.current()).toEqual({ b: 1 });
+  rerender2({ b: 2 });
+  expect(result2.current()).toEqual({ b: 2 });
+});
+
+test("wrapRef", () => {
+  const ref: {
+    current: {
+      a: (a: number, b: number) => number;
+      b: string;
+      c: (a: number, b: number) => number;
+    } | null;
+  } = {
+    current: null,
+  };
+
+  const res = wrapRef(ref, { a: 1, c: 1 });
+  expect(res).toEqual({
+    a: expect.any(Function),
+    b: undefined,
+    c: expect.any(Function),
+  });
+  expect(res.a(1, 2)).toBeUndefined();
+  expect((res as any).b).toBeUndefined();
+
+  ref.current = {
+    a: (a: number, b: number) => a + b,
+    b: "foobar",
+    c: (a: number, b: number) => a - b,
+  };
+  expect(res.a(1, 2)).toBe(3);
+  expect((res as any).b).toBeUndefined();
+  expect(res.c(1, 2)).toBe(-1);
+
+  ref.current = null;
+  expect(res.a(1, 2)).toBeUndefined();
+  expect((res as any).b).toBeUndefined();
+  expect(res.c(1, 2)).toBeUndefined();
+});
diff --git a/web/src/beta/core/Map/utils.ts b/web/src/beta/core/Map/utils.ts
new file mode 100644
index 0000000000..e974c98ed3
--- /dev/null
+++ b/web/src/beta/core/Map/utils.ts
@@ -0,0 +1,71 @@
+import { cloneDeep, mergeWith, omit } from "lodash-es";
+import { type RefObject, useCallback, useRef, useState, useMemo } from "react";
+
+export function useGet<T>(value: T): () => T {
+  const ref = useRef<T>(value);
+  ref.current = value;
+  return useCallback(() => ref.current, []);
+}
+
+export function wrapRef<T>(ref: RefObject<T>, keys: FunctionKeys<T>): WrappedRef<T> {
+  return Object.fromEntries(
+    (Object.keys(keys) as (keyof T)[]).map(k => {
+      return [k, (...args: any[]) => (ref.current?.[k] as any)?.(...args)];
+    }),
+  ) as WrappedRef<T>;
+}
+
+export function mergeProperty(a: any, b: any) {
+  const a2 = cloneDeep(a);
+  return mergeWith(
+    a2,
+    b,
+    (s: any, v: any, _k: string | number | symbol, _obj: any, _src: any, stack: { size: number }) =>
+      stack.size > 0 || Array.isArray(v) ? v ?? s : undefined,
+  );
+}
+
+export function useOverriddenProperty<T extends {}>(
+  property: T | undefined,
+): [T, (pluginId: string, property: T) => void] {
+  const [overriddenProperties, setOverrideProperty] = useState<{
+    [pluginId: string]: any;
+  }>({});
+  const { overriddenPropertyCommon, overriddenProperty } = useMemo(() => {
+    const { "": overriddenPropertyCommon, ...overriddenProperty } = overriddenProperties;
+    return { overriddenPropertyCommon, overriddenProperty };
+  }, [overriddenProperties]);
+
+  const overrideProperty = useCallback((pluginId: string, property: any) => {
+    setOverrideProperty(p => (property ? { ...p, [pluginId || ""]: property } : omit(p, pluginId)));
+  }, []);
+
+  const mergedProperty = useMemo(() => {
+    return [overriddenPropertyCommon, ...Object.values(overriddenProperty)].reduce(
+      (p, v) => mergeProperty(p, v),
+      property,
+    );
+  }, [property, overriddenPropertyCommon, overriddenProperty]);
+
+  return [mergedProperty, overrideProperty];
+}
+
+export type FunctionKeys<T> = {
+  [P in keyof T as T[P] extends (...args: any[]) => any ? P : never]: 1;
+};
+
+export type WrappedRef<T> = {
+  [P in keyof T as T[P] extends (...args: any[]) => any ? P : never]: T[P] extends (
+    ...args: infer A
+  ) => infer R
+    ? (...args: A) => R | undefined
+    : never;
+};
+
+export type Undefinable<T extends object> = {
+  [K in keyof T]: T[K] extends object
+    ? T[K] extends (...args: any[]) => any
+      ? T[K] | undefined
+      : Undefinable<T[K]> | undefined
+    : T[K] | undefined;
+};
diff --git a/web/src/beta/core/README.md b/web/src/beta/core/README.md
new file mode 100644
index 0000000000..7fb5c15032
--- /dev/null
+++ b/web/src/beta/core/README.md
@@ -0,0 +1,7 @@
+# @reearth/core
+
+- **Visualizer**: Map + Crust
+- **Crust**: Plugins + Widgets + Infobox
+- **Map**: Engine + mantle
+
+![Architecture](docs/architecture.svg)
diff --git a/web/src/beta/core/Visualizer/Error.tsx b/web/src/beta/core/Visualizer/Error.tsx
new file mode 100644
index 0000000000..521d3e311e
--- /dev/null
+++ b/web/src/beta/core/Visualizer/Error.tsx
@@ -0,0 +1,15 @@
+import type { FallbackProps } from "react-error-boundary";
+
+export default function Error({ error, resetErrorBoundary }: FallbackProps) {
+  return (
+    <div>
+      <h1>Oops! An Error Occurred</h1>
+      <p>{error.message}</p>
+      <p>
+        <button style={{ color: "#fff" }} onClick={resetErrorBoundary}>
+          Retry
+        </button>
+      </p>
+    </div>
+  );
+}
diff --git a/web/src/beta/core/Visualizer/engines.ts b/web/src/beta/core/Visualizer/engines.ts
new file mode 100644
index 0000000000..478ad67967
--- /dev/null
+++ b/web/src/beta/core/Visualizer/engines.ts
@@ -0,0 +1,7 @@
+import { engine as cesium } from "../engines/Cesium";
+
+export const engines = {
+  cesium,
+};
+
+export type EngineType = keyof typeof engines;
diff --git a/web/src/beta/core/Visualizer/hooks.ts b/web/src/beta/core/Visualizer/hooks.ts
new file mode 100644
index 0000000000..a56a1effd6
--- /dev/null
+++ b/web/src/beta/core/Visualizer/hooks.ts
@@ -0,0 +1,336 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useWindowSize } from "react-use";
+
+// TODO: Move these utils
+import { convertTime, truncMinutes } from "@reearth/beta/utils/time";
+import { type DropOptions, useDrop } from "@reearth/beta/utils/use-dnd";
+
+import type { Block, BuiltinWidgets } from "../Crust";
+import { getBuiltinWidgetOptions } from "../Crust/Widgets/Widget";
+import type { ComputedFeature, Feature, LatLng, SelectedFeatureInfo } from "../mantle";
+import type {
+  Ref as MapRef,
+  LayerSelectionReason,
+  Camera,
+  ComputedLayer,
+  SceneProperty,
+  LayerEditEvent,
+  DefaultInfobox,
+} from "../Map";
+import { useOverriddenProperty } from "../Map";
+
+import useViewport from "./useViewport";
+
+const viewportMobileMaxWidth = 768;
+
+export default function useHooks({
+  selectedBlockId: initialSelectedBlockId,
+  camera: initialCamera,
+  sceneProperty,
+  isEditable,
+  rootLayerId,
+  zoomedLayerId,
+  ownBuiltinWidgets,
+  onLayerSelect,
+  onBlockSelect,
+  onCameraChange,
+  onZoomToLayer,
+  onLayerDrop,
+}: {
+  selectedBlockId?: string;
+  camera?: Camera;
+  isEditable?: boolean;
+  rootLayerId?: string;
+  sceneProperty?: SceneProperty;
+  zoomedLayerId?: string;
+  ownBuiltinWidgets?: (keyof BuiltinWidgets)[];
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId: string | undefined,
+    layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+    reason: LayerSelectionReason | undefined,
+  ) => void;
+  onBlockSelect?: (blockId?: string) => void;
+  onCameraChange?: (camera: Camera) => void;
+  onZoomToLayer?: (layerId: string | undefined) => void;
+  onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
+}) {
+  const mapRef = useRef<MapRef>(null);
+
+  const wrapperRef = useRef<HTMLDivElement>(null);
+
+  const { ref: dropRef, isDroppable } = useDrop(
+    useMemo(
+      (): DropOptions => ({
+        accept: ["primitive"],
+        drop(_item, context) {
+          if (!rootLayerId || !isEditable) return;
+          const loc = context.position
+            ? mapRef.current?.engine.getLocationFromScreen(context.position.x, context.position.y)
+            : undefined;
+          return {
+            type: "earth",
+            layerId: rootLayerId,
+            position: loc ? { lat: loc.lat, lng: loc.lng, height: loc.height } : undefined,
+          };
+        },
+        wrapperRef,
+      }),
+      [rootLayerId, isEditable],
+    ),
+  );
+  dropRef(wrapperRef);
+
+  const viewport = useViewport({
+    wrapperRef,
+  });
+
+  // layer
+  const [selectedLayer, selectLayer] = useState<{
+    layerId?: string;
+    featureId?: string;
+    layer?: ComputedLayer;
+    reason?: LayerSelectionReason;
+  }>({});
+  const [selectedFeature, selectFeature] = useState<Feature>();
+  const [selectedComputedFeature, selectComputedFeature] = useState<ComputedFeature>();
+  useEffect(() => {
+    const { layerId, featureId, layer, reason } = selectedLayer;
+    onLayerSelect?.(layerId, featureId, async () => layer, reason);
+  }, [onLayerSelect, selectedLayer]);
+  const handleLayerSelect = useCallback(
+    async (
+      layerId: string | undefined,
+      featureId: string | undefined,
+      layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+      reason: LayerSelectionReason | undefined,
+      info: SelectedFeatureInfo | undefined,
+    ) => {
+      const computedLayer = await layer?.();
+
+      selectFeature(computedLayer?.originalFeatures.find(f => f.id === featureId));
+      selectComputedFeature(computedLayer?.features.find(f => f.id === featureId) ?? info?.feature);
+
+      selectLayer({ layerId, featureId, layer: computedLayer, reason });
+    },
+    [],
+  );
+
+  // blocks
+  const blocks = useMemo(
+    () =>
+      selectedLayer.layer?.layer?.infobox?.blocks?.map(b => ({
+        ...b,
+        property: b.property?.default ?? b.property,
+      })),
+    [selectedLayer.layer?.layer?.infobox?.blocks],
+  );
+
+  // Infobox
+  const defaultInfobox = selectedLayer.reason?.defaultInfobox;
+  const infobox = useMemo(
+    () =>
+      selectedLayer
+        ? {
+            title: selectedLayer.layer?.layer?.title || defaultInfobox?.title,
+            isEditable: !!selectedLayer.layer?.layer?.infobox,
+            visible: !!selectedLayer.layer?.layer?.infobox || !!defaultInfobox,
+            property: selectedLayer.layer?.layer?.infobox?.property?.default,
+            blocks: blocks?.length ? blocks : defaultInfoboxBlocks(defaultInfobox),
+          }
+        : undefined,
+    [selectedLayer, defaultInfobox, blocks],
+  );
+  const handleInfoboxClose = useCallback(() => {
+    if (infobox?.property?.unselectOnClose) {
+      mapRef?.current?.layers.select(undefined);
+    }
+  }, [infobox]);
+
+  // scene
+  const [overriddenSceneProperty, overrideSceneProperty] = useOverriddenProperty(sceneProperty);
+
+  // clock
+  const overriddenClock = useMemo(() => {
+    const { start, stop, current } = overriddenSceneProperty.timeline || {};
+    const startTime = convertTime(start)?.getTime();
+    const stopTime = convertTime(stop)?.getTime();
+    const currentTime = convertTime(current)?.getTime();
+
+    const DEFAULT_NEXT_RANGE = 86400000; // a day
+
+    // To avoid out of range error in Cesium, we need to turn back a hour.
+    const now = Date.now() - 3600000;
+
+    const convertedStartTime = startTime
+      ? Math.min(now, startTime)
+      : stopTime
+      ? Math.min(now, stopTime - DEFAULT_NEXT_RANGE)
+      : now - DEFAULT_NEXT_RANGE;
+
+    const convertedStopTime = stopTime
+      ? Math.min(stopTime, now)
+      : startTime
+      ? Math.min(now, startTime + DEFAULT_NEXT_RANGE)
+      : now;
+
+    return {
+      start: start || stop ? truncMinutes(new Date(convertedStartTime)) : undefined,
+      stop: start || stop ? new Date(convertedStopTime) : undefined,
+      current:
+        start || stop || current
+          ? new Date(
+              Math.max(
+                Math.min(convertedStopTime, currentTime || convertedStartTime),
+                convertedStartTime,
+              ),
+            )
+          : undefined,
+    };
+  }, [overriddenSceneProperty]);
+
+  // block
+  const [selectedBlock, selectBlock] = useValue(initialSelectedBlockId, onBlockSelect);
+
+  // camera
+  const [camera, changeCamera] = useValue(initialCamera, onCameraChange);
+
+  // mobile
+  const { width } = useWindowSize();
+  const isMobile = width < viewportMobileMaxWidth;
+
+  // layer edit
+  const onLayerEditRef = useRef<(e: LayerEditEvent) => void>();
+  const onLayerEdit = useCallback((cb: (e: LayerEditEvent) => void) => {
+    onLayerEditRef.current = cb;
+  }, []);
+  const handleLayerEdit = useCallback((e: LayerEditEvent) => {
+    onLayerEditRef.current?.(e);
+  }, []);
+
+  // zoom to layer
+  useEffect(() => {
+    if (zoomedLayerId) {
+      mapRef.current?.engine?.lookAtLayer(zoomedLayerId);
+      onZoomToLayer?.(undefined);
+    }
+  }, [zoomedLayerId, onZoomToLayer]);
+
+  // dnd
+  const [isLayerDragging, setIsLayerDragging] = useState(false);
+  const handleLayerDrag = useCallback(() => {
+    setIsLayerDragging(true);
+  }, []);
+  const handleLayerDrop = useCallback(
+    (layerId: string, _featureId: string | undefined, latlng: LatLng | undefined) => {
+      setIsLayerDragging(false);
+      const layer = mapRef.current?.layers.findById(layerId);
+      const propertyKey = layer?.property.default.location
+        ? "default.location"
+        : layer?.property.default.position
+        ? "default.position"
+        : undefined;
+      if (latlng && layer && layer.propertyId && propertyKey) {
+        onLayerDrop?.(layer.propertyId, propertyKey, latlng);
+      }
+    },
+    [onLayerDrop, mapRef],
+  );
+
+  // shouldRender
+  const shouldRender = useMemo(() => {
+    const shouldWidgetAnimate = ownBuiltinWidgets?.some(
+      id => !!getBuiltinWidgetOptions(id).animation,
+    );
+    return shouldWidgetAnimate;
+  }, [ownBuiltinWidgets]);
+
+  return {
+    mapRef,
+    wrapperRef,
+    selectedLayer: selectedLayer,
+    selectedFeature,
+    selectedComputedFeature,
+    selectedBlock,
+    viewport,
+    camera,
+    isMobile,
+    overriddenSceneProperty,
+    overriddenClock,
+    isDroppable,
+    infobox,
+    isLayerDragging,
+    shouldRender,
+    handleLayerSelect,
+    handleBlockSelect: selectBlock,
+    handleCameraChange: changeCamera,
+    handleLayerDrag,
+    handleLayerDrop,
+    overrideSceneProperty,
+    handleLayerEdit,
+    onLayerEdit,
+    handleInfoboxClose,
+  };
+}
+
+function useValue<T>(
+  initial: T | undefined,
+  onChange: ((t: T) => void) | undefined,
+): [T | undefined, (v?: T) => void] {
+  const [state, set] = useState(initial);
+
+  const handleOnChange = useCallback(
+    (v?: T) => {
+      if (v) {
+        set(v);
+        onChange?.(v);
+      }
+    },
+    [onChange],
+  );
+
+  useEffect(() => {
+    set(initial);
+  }, [initial]);
+
+  return [state, handleOnChange];
+}
+
+function defaultInfoboxBlocks(defaultInfobox: DefaultInfobox | undefined): Block[] | undefined {
+  if (defaultInfobox?.content.type === "table") {
+    return Array.isArray(defaultInfobox?.content.value)
+      ? [
+          {
+            id: "content",
+            pluginId: "reearth",
+            extensionId: "dlblock",
+            property: {
+              items: defaultInfobox.content.value.map((c, i) => ({
+                id: i,
+                item_title: c.key,
+                item_datastr: String(c.value),
+                item_datatype: "string",
+              })),
+            },
+          },
+        ]
+      : undefined;
+  }
+
+  if (defaultInfobox?.content.type === "html") {
+    return defaultInfobox.content.value
+      ? [
+          {
+            id: "content",
+            pluginId: "reearth",
+            extensionId: "htmlblock",
+            property: {
+              html: defaultInfobox.content.value,
+            },
+          },
+        ]
+      : undefined;
+  }
+
+  return undefined;
+}
diff --git a/web/src/beta/core/Visualizer/index.stories.tsx b/web/src/beta/core/Visualizer/index.stories.tsx
new file mode 100644
index 0000000000..bc84f8e597
--- /dev/null
+++ b/web/src/beta/core/Visualizer/index.stories.tsx
@@ -0,0 +1,69 @@
+import { Meta, Story } from "@storybook/react";
+
+import Component, { Props } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const Cesium = Template.bind({});
+
+Cesium.args = {
+  ready: true,
+  engine: "cesium",
+  sceneProperty: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
+
+export const Plugin = Template.bind({});
+
+Plugin.args = {
+  ready: true,
+  engine: "cesium",
+  sceneProperty: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+  widgetAlignSystem: {
+    outer: {
+      left: {
+        top: {
+          align: "start",
+          widgets: [
+            {
+              id: "plugin",
+              pluginId: "plugin",
+              extensionId: "test",
+              ...({
+                __REEARTH_SOURCECODE: `reearth.layers.add(${JSON.stringify({
+                  id: "l",
+                  type: "simple",
+                  data: {
+                    type: "geojson",
+                    value: { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] } },
+                  },
+                  marker: {
+                    imageColor: "#fff",
+                  },
+                })});`,
+              } as any),
+            },
+          ],
+        },
+      },
+    },
+  },
+};
diff --git a/web/src/beta/core/Visualizer/index.tsx b/web/src/beta/core/Visualizer/index.tsx
new file mode 100644
index 0000000000..358d4ed178
--- /dev/null
+++ b/web/src/beta/core/Visualizer/index.tsx
@@ -0,0 +1,283 @@
+import { CSSProperties, useMemo, type ReactNode } from "react";
+import { ErrorBoundary } from "react-error-boundary";
+
+import DropHolder from "@reearth/beta/components/DropHolder";
+import { styled } from "@reearth/services/theme";
+
+import Crust, {
+  type Alignment,
+  type Location,
+  type WidgetAlignSystem,
+  type WidgetLayoutConstraint,
+  type ExternalPluginProps,
+  type InternalWidget,
+  WidgetAreaType,
+  BuiltinWidgets,
+} from "../Crust";
+import { Tag } from "../mantle";
+import Map, {
+  type ValueTypes,
+  type ValueType,
+  type SceneProperty,
+  type Layer,
+  type LayerSelectionReason,
+  type Camera,
+  type LatLng,
+  type Cluster,
+  type ComputedLayer,
+} from "../Map";
+
+import { engines, type EngineType } from "./engines";
+import Err from "./Error";
+import useHooks from "./hooks";
+
+export type {
+  Alignment,
+  Location,
+  ValueTypes,
+  ValueType,
+  WidgetAlignSystem,
+  WidgetLayoutConstraint,
+} from "../Crust";
+export type { EngineType } from "./engines";
+export type { Viewport } from "./useViewport";
+
+export type Props = {
+  engine?: EngineType;
+  isBuilt?: boolean;
+  isEditable?: boolean;
+  inEditor?: boolean;
+  rootLayerId?: string;
+  widgetAlignSystem?: WidgetAlignSystem;
+  widgetLayoutConstraint?: { [w: string]: WidgetLayoutConstraint };
+  ownBuiltinWidgets?: (keyof BuiltinWidgets)[];
+  widgetAlignSystemEditing?: boolean;
+  floatingWidgets?: InternalWidget[];
+  sceneProperty?: SceneProperty;
+  layers?: Layer[];
+  clusters?: Cluster[];
+  camera?: Camera;
+  meta?: Record<string, unknown>;
+  style?: CSSProperties;
+  small?: boolean;
+  ready?: boolean;
+  tags?: Tag[];
+  selectedBlockId?: string;
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  layerSelectionReason?: LayerSelectionReason;
+  useExperimentalSandbox?: boolean;
+  selectedWidgetArea?: WidgetAreaType;
+  hiddenLayers?: string[];
+  zoomedLayerId?: string;
+  onCameraChange?: (camera: Camera) => void;
+  onLayerDrop?: (layerId: string, propertyKey: string, position: LatLng | undefined) => void;
+  onLayerSelect?: (
+    layerId: string | undefined,
+    featureId: string | undefined,
+    layer: (() => Promise<ComputedLayer | undefined>) | undefined,
+    reason: LayerSelectionReason | undefined,
+  ) => void;
+  onWidgetLayoutUpdate?: (
+    id: string,
+    update: {
+      location?: Location;
+      extended?: boolean;
+      index?: number;
+    },
+  ) => void;
+  onWidgetAlignmentUpdate?: (location: Location, align: Alignment) => void;
+  onWidgetAreaSelect?: (widgetArea?: WidgetAreaType) => void;
+  onInfoboxMaskClick?: () => void;
+  onBlockSelect?: (id?: string) => void;
+  onBlockChange?: <T extends ValueType>(
+    blockId: string,
+    schemaItemId: string,
+    fieldId: string,
+    value: ValueTypes[T],
+    type: T,
+  ) => void;
+  onBlockMove?: (id: string, fromIndex: number, toIndex: number) => void;
+  onBlockDelete?: (id: string) => void;
+  onBlockInsert?: (bi: number, i: number, pos?: "top" | "bottom") => void;
+  onZoomToLayer?: (layerId: string | undefined) => void;
+  renderInfoboxInsertionPopup?: (onSelect: (bi: number) => void, onClose: () => void) => ReactNode;
+} & ExternalPluginProps;
+
+export default function Visualizer({
+  engine,
+  isBuilt,
+  rootLayerId,
+  isEditable,
+  inEditor,
+  sceneProperty,
+  layers,
+  clusters,
+  widgetAlignSystem,
+  widgetAlignSystemEditing,
+  widgetLayoutConstraint,
+  floatingWidgets,
+  ownBuiltinWidgets,
+  small,
+  ready,
+  tags,
+  selectedBlockId,
+  selectedLayerId,
+  selectedWidgetArea,
+  hiddenLayers,
+  camera: initialCamera,
+  meta,
+  style,
+  pluginBaseUrl,
+  pluginProperty,
+  zoomedLayerId,
+  layerSelectionReason,
+  useExperimentalSandbox,
+  onLayerDrop,
+  onLayerSelect,
+  onCameraChange,
+  onWidgetLayoutUpdate,
+  onWidgetAlignmentUpdate,
+  onWidgetAreaSelect,
+  onInfoboxMaskClick,
+  onBlockSelect,
+  onBlockChange,
+  onBlockMove,
+  onBlockDelete,
+  onBlockInsert,
+  onZoomToLayer,
+  renderInfoboxInsertionPopup,
+}: Props): JSX.Element | null {
+  const {
+    mapRef,
+    wrapperRef,
+    selectedLayer,
+    selectedBlock,
+    selectedFeature,
+    selectedComputedFeature,
+    viewport,
+    camera,
+    isMobile,
+    overriddenSceneProperty,
+    overriddenClock,
+    isDroppable,
+    isLayerDragging,
+    infobox,
+    shouldRender,
+    handleLayerSelect,
+    handleBlockSelect,
+    handleCameraChange,
+    handleLayerDrag,
+    handleLayerDrop,
+    overrideSceneProperty,
+    handleLayerEdit,
+    onLayerEdit,
+    handleInfoboxClose,
+  } = useHooks({
+    rootLayerId,
+    isEditable,
+    camera: initialCamera,
+    selectedBlockId,
+    sceneProperty,
+    zoomedLayerId,
+    ownBuiltinWidgets,
+    onLayerSelect,
+    onBlockSelect,
+    onCameraChange,
+    onZoomToLayer,
+    onLayerDrop,
+  });
+
+  const selectedLayerIdForCrust = useMemo(
+    () => ({ layerId: selectedLayer.layerId, featureId: selectedLayer.featureId }),
+    [selectedLayer.featureId, selectedLayer.layerId],
+  );
+
+  return (
+    <ErrorBoundary FallbackComponent={Err}>
+      <Filled ref={wrapperRef}>
+        {isDroppable && <DropHolder />}
+        <Crust
+          engineName={engine}
+          tags={tags}
+          viewport={viewport}
+          isBuilt={isBuilt}
+          isEditable={isEditable && infobox?.isEditable}
+          inEditor={inEditor}
+          sceneProperty={overriddenSceneProperty}
+          overrideSceneProperty={overrideSceneProperty}
+          overriddenClock={overriddenClock}
+          blocks={infobox?.blocks}
+          camera={camera}
+          isMobile={isMobile}
+          selectedWidgetArea={selectedWidgetArea}
+          selectedComputedLayer={selectedLayer?.layer}
+          selectedFeature={selectedFeature}
+          selectedComputedFeature={selectedComputedFeature}
+          selectedReason={selectedLayer.reason}
+          infoboxProperty={infobox?.property}
+          infoboxTitle={infobox?.title}
+          infoboxVisible={!!infobox?.visible}
+          selectedBlockId={selectedBlock}
+          selectedLayerId={selectedLayerIdForCrust}
+          widgetAlignSystem={widgetAlignSystem}
+          widgetAlignSystemEditing={widgetAlignSystemEditing}
+          widgetLayoutConstraint={widgetLayoutConstraint}
+          floatingWidgets={floatingWidgets}
+          mapRef={mapRef}
+          externalPlugin={{ pluginBaseUrl, pluginProperty }}
+          useExperimentalSandbox={useExperimentalSandbox}
+          onWidgetLayoutUpdate={onWidgetLayoutUpdate}
+          onWidgetAlignmentUpdate={onWidgetAlignmentUpdate}
+          onWidgetAreaSelect={onWidgetAreaSelect}
+          onInfoboxMaskClick={onInfoboxMaskClick}
+          onInfoboxClose={handleInfoboxClose}
+          onBlockSelect={handleBlockSelect}
+          onBlockChange={onBlockChange}
+          onBlockMove={onBlockMove}
+          onBlockDelete={onBlockDelete}
+          onBlockInsert={onBlockInsert}
+          renderInfoboxInsertionPopup={renderInfoboxInsertionPopup}
+          onLayerEdit={onLayerEdit}
+        />
+        <Map
+          ref={mapRef}
+          isBuilt={isBuilt}
+          isEditable={isEditable}
+          engine={engine}
+          layers={layers}
+          engines={engines}
+          camera={camera}
+          overriddenClock={overriddenClock}
+          clusters={clusters}
+          hiddenLayers={hiddenLayers}
+          isLayerDragging={isLayerDragging}
+          isLayerDraggable={isEditable}
+          meta={meta}
+          style={style}
+          shouldRender={shouldRender}
+          // overrides={overrides} // not used for now
+          property={overriddenSceneProperty}
+          selectedLayerId={selectedLayerId}
+          layerSelectionReason={layerSelectionReason}
+          small={small}
+          ready={ready}
+          onCameraChange={handleCameraChange}
+          onLayerDrag={handleLayerDrag}
+          onLayerDrop={handleLayerDrop}
+          onLayerSelect={handleLayerSelect}
+          onLayerEdit={handleLayerEdit}
+        />
+      </Filled>
+    </ErrorBoundary>
+  );
+}
+
+const Filled = styled.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+`;
diff --git a/web/src/beta/core/Visualizer/useViewport.ts b/web/src/beta/core/Visualizer/useViewport.ts
new file mode 100644
index 0000000000..a0533abece
--- /dev/null
+++ b/web/src/beta/core/Visualizer/useViewport.ts
@@ -0,0 +1,74 @@
+import { useState, useEffect, RefObject, useMemo } from "react";
+
+const viewportMobileMaxWidth = 768;
+
+export type Viewport = {
+  width: number | undefined;
+  height: number | undefined;
+  isMobile: boolean | undefined;
+  query: Record<string, string>;
+};
+
+type Props = {
+  wrapperRef: RefObject<HTMLDivElement>;
+};
+
+export default ({ wrapperRef }: Props) => {
+  const query = useMemo(() => paramsToObject(new URLSearchParams(window.location.search)), []);
+  const [viewport, setViewport] = useState<Viewport>({
+    width: undefined,
+    height: undefined,
+    isMobile: undefined,
+    query,
+  });
+
+  useEffect(() => {
+    const viewportResizeObserver = new ResizeObserver(entries => {
+      const [entry] = entries;
+      let width: number | undefined;
+      let height: number | undefined;
+
+      if (entry.contentBoxSize) {
+        // Firefox(v69-91) implements `contentBoxSize` as a single content rect, rather than an array
+        const contentBoxSize = Array.isArray(entry.contentBoxSize)
+          ? entry.contentBoxSize[0]
+          : entry.contentBoxSize;
+        width = contentBoxSize.inlineSize;
+        height = contentBoxSize.blockSize;
+      } else if (entry.contentRect) {
+        width = entry.contentRect.width;
+        height = entry.contentRect.height;
+      } else {
+        width = wrapperRef.current?.clientWidth;
+        height = wrapperRef.current?.clientHeight;
+      }
+
+      setViewport(viewport => {
+        return {
+          width,
+          height,
+          isMobile: width ? width <= viewportMobileMaxWidth : undefined,
+          query: viewport.query,
+        };
+      });
+    });
+
+    if (wrapperRef.current) {
+      viewportResizeObserver.observe(wrapperRef.current);
+    }
+
+    return () => {
+      viewportResizeObserver.disconnect();
+    };
+  }, [wrapperRef]);
+
+  return viewport;
+};
+
+function paramsToObject(entries: URLSearchParams) {
+  const result: Record<string, string> = {};
+  for (const [key, value] of entries) {
+    result[key] = value;
+  }
+  return result;
+}
diff --git a/web/src/beta/core/docs/architecture.d2 b/web/src/beta/core/docs/architecture.d2
new file mode 100644
index 0000000000..7bf492cc07
--- /dev/null
+++ b/web/src/beta/core/docs/architecture.d2
@@ -0,0 +1,21 @@
+viz: Visualizer
+map: Map
+plugin: Plugins
+mantle: mantle
+engine: Engine
+crust: Crust
+infobox: Infobox
+was: Widgets
+cesium: Cesium
+feature: Feature
+
+viz -> crust: use
+crust -> plugin: use
+crust -> was: use
+crust -> infobox: use
+viz -> map: use
+engine -> map: inject
+engine -> mantle: use
+engine -> cesium: use
+cesium -> feature: use
+map -> mantle: use
diff --git a/web/src/beta/core/docs/architecture.svg b/web/src/beta/core/docs/architecture.svg
new file mode 100644
index 0000000000..05aa64c34d
--- /dev/null
+++ b/web/src/beta/core/docs/architecture.svg
@@ -0,0 +1,111 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="0.4.0" preserveAspectRatio="xMinYMin meet" viewBox="0 0 950 642"><svg id="d2-svg" class="d2-4272314804" width="950" height="642" viewBox="-101 -101 950 642"><rect x="-101.000000" y="-101.000000" width="950.000000" height="642.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+.d2-4272314804 .text-bold {
+	font-family: "d2-4272314804-font-bold";
+}
+@font-face {
+	font-family: d2-4272314804-font-bold;
+	src: url("data:application/font-woff;base64,d09GRgABAAAAAA3AAAoAAAAAFOwAAguFAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgXxHXrmNtYXAAAAFUAAAAlQAAAL4DjgP0Z2x5ZgAAAewAAAdJAAAJlNBAltxoZWFkAAAJOAAAADYAAAA2G38e1GhoZWEAAAlwAAAAJAAAACQKfwXfaG10eAAACZQAAACAAAAAgD0KBNhsb2NhAAAKFAAAAEIAAABCKggndG1heHAAAApYAAAAIAAAACAAOAD3bmFtZQAACngAAAMoAAAIKgjwVkFwb3N0AAANoAAAAB0AAAAg/9EAMgADAioCvAAFAAACigJYAAAASwKKAlgAAAFeADIBKQAAAgsHAwMEAwICBGAAAvcAAAADAAAAAAAAAABBREJPACAAIP//Au7/BgAAA9gBESAAAZ8AAAAAAfAClAAAACAAA3icdM09SwIBHIDx33XX23XV9V5X3+YoaAiaam6KwkEEQfwmroovq4sIol/tL6irz/obHiRSCQqZHiqlVK725t2HT99+/Wtq6+hGoPa6sy8//jS0tharWMYi5jGLaUxiHKMYxiD6m8O+EgdSmUNHjp04lTtTOHfhUunKtRu37tx78OhJ5dkLawAAAP//AQAA//8rySNtAAAAeJxcVlts2+YVPv8virQZ+kJRJHUxdaNESr7IliiKcWxHvsiXpJJvQZxLfWmDIknnXLpYWZwuxR4adFinoBvUtekyZBuwARuwPhTbgKVA+tRhC7qhGdIte2maFXvY0+IWxtBgMlWQkuMkD/YvHPw8l+983zk/OGEWAB/Db4IDmqENXMADaGyYjWmqKlOGZhiy6DBUxFKz2GX+8hdqgkgkiM7Q1eDLKyuouIzf3Dr1bPHYsf+tDAyY12+8b15Ba+8DIEjWNnEfvgp+AGdEUfRMNqulBZFSFDlCkrxb0NJZQyTR0vzrBw5emc+9EJ72GnL3vq6FqXjOMz3PFH50+tQ7c1pkWZTSy6MvvBT1Lj4HCIoA6AEuwy47Tz7Ma7zMh/kiumr+/9491IbLl1799luXABp3/4PL0Pz43SK6Zn71+ee4fOntS1uwfQ/u4zI4rHsaW6zg8lapbsfv4jIEbTsnCKKWzRqcxspWOYZMUbKqygHM88Wfv0i7aIJm6RM/e41qdhD60txShiCaKFw273XsDQT2dqDIVulBaGY2eO3hw2vB2ZnQAwBsx+jDZWDAbUdJCwLvJklZ5lktrWcUWS7enzo/MVEan5taHx7M47K6OFM41vspmj+pddr51x4CYA2XoQVAczyWp+ODP/5kuk1sI1o9rcW3PsRl87Z+PJs9rqM+u75WAEcIlyH81HePeZAdiqLKJEk5vnvx7R6ylSRojp54ZYLmaIJqoXqulG4MN7U4CbKlaQiXzY+1E5nMCQ2lzI9TJ3X9RBqltkoorhSj0aJi/hMwdNY20SeoCl6QAcSIRQzD5gSl2gzhWdmKZ6Szhm7z5IP87OUKlhPB4ajeu7pn5fg6TQQnm7wxbnowyBzKTR9uC6se/nkpeuac+W+tQz4ncofoLskjgoXvSG0TC/gmuK0uOiOKKlMyq/GUHcyGWk1n9YwcoXhBQOPhMYlg1iqElI8MHu4dXDmsZBe6E+44Ew7p+OZvCj5p7zcLBy/m1icKr/V85Gq1+ROtbaKbqAq+p7kuR3aYTiLv+NmRqW/lk5Md43JIz+X6PEluT2yBGTo/f6A0FBBXpMLIcJFvey7kBzt3tbaJqvgmcBDaxsp2rOraYygpjTBfLp4dWMkkdnvJyjpN+CawR3VxXW4528t8/+Lc+b0dnsKvt8ZSPnnd7f3I1To2uW8csJ37v1AVPA18toNY0FBhQdDSVu4OLWNFQcHJc6NjpwYml3oJbN6lJ1J6NqUs//i3ancky+wtzc+VcrnVPBdrzmrhI74A2pPQe+sa8wCgEr5lnZZ+jCcHAm9Jkz06OhqdHQtm2v0tPsYfOHIEvXLa6dcXMgx5yukMK4E181UAB0RqPZhCVeiFAdhvI6PoGQsIi0z6dgmixssNMUVUuw8Wvdwk6bAa3gCNq/+WI4p95cs9y7snOX/I40vsWda7w7+foZozhw0p6IokZhefz1/aL6mqJKlqIj2sxjRvmPEP3fHt7h6MEy3xoD/dTrjyXYMzcWZ1V8Tdvz9Ktwmca2BMm0uiW50JNRGPJzrNStQrtjscHm+HBAC1GhgA8Cm+gxWwDBQE4HXLXvtrbRA+s+3Bhr1sYzlS20QufBPa6qxgNfYRyf5cGKiwzU6KdDEx5tlnsLx1V3QhdNpJWd8BOCRUtfXOapbErQ5sy461MKEenSOWziZS+ggX3p+afaYihWJ91r9etDEc7OmKR1KrS+ZfUDgb7zPfaxz1GBhQtTHNGjG2vZN1t6Fiem5fRQp1xD1oIxfo2XbkFc33oM5Ju79tT22PHbk2uoeE3Nl8/mwudyafP5PrSSZ7kj09DT0NlQ7Mnx+6UBweKViyqs+CKSygKnAQABB3srMpoqgiz+2MAitPaZ969OTgSjY06HPOKNmFrk53/A/4Vymf/L21g+s5v3fmhyj6aBDYtaM3UBVcT+BbZ3i9cn9B4TtoT4u3vWPIjTYOpVNO53cIIpE27wMCvraJfoqqoNp9VQ1LfVaxiprEembHGe8WxADm3eSd1AllNJILhgNS0hcYiL94sP9QcNSX8fX3K6GhxElGCS56/SLHChzNRPsT4wuq57BbUD3e1l1yf3Jsqa5NtraJzuASiDbaui7rhqHZy3JneMHiTL7AvnzhgiwxXlrkDOYbC7dOk5cvr/2pM0YSqyRT9zVY20RfoQ2r/09wk22MrH/M7asEQh2KUFnf5QjuZ1aXUMb8TE/4JDRlto/Huut7CW2iDfACaJyqiY11ZGiUKKuNfUS1Xn3jejct0ESTqyly9QfvXO9jRIZodjerCP93lu/i+S5+tvbFPN/N813CvJWbAoB+hzbs94DOyXqYd2i8cvsGeun23RmUXJs2/7bW6CN8gja23wMjFbRhtgOqvYv74QC+Y709WHsa18kTSyZjsWQS93fKcqf1Z+1kS7t/RxvQ/kQvLThIMhpMtPlojpbESqj4YRN5ykGoCfSFyWWPGvA1AAAA//8BAAD//4I/+RIAAAAAAQAAAAILhRPEAsVfDzz1AAED6AAAAADYXaCEAAAAAN1mLzb+N/7ECG0D8QABAAMAAgAAAAAAAAABAAAD2P7vAAAImP43/jcIbQABAAAAAAAAAAAAAAAAAAAAIAKyAFACRgAuAiQATQIMAE0BLQBNAvoATQJUAE0CLP/5Ay0ADgIPACoCPQBBAdMAJAI9ACcCBgAkAVUAGAIWACIBFAA3ARb/zQEeAEEDWQBBAjwAQQIrACQCPQBBAY4AQQG7ABUBfwARAjgAPAICAA4BzAAmARQAQQAA/60BFv/NAAAALABYAG4AggCOAMAA4gD+ATgBcAGiAc4CAAI0AloCwgLOAtoC9gMoA0oDdgOmA8YEAgQoBEoEdgSKBJYErATKAAAAAQAAACAAkAAMAGMABwABAAAAAAAAAAAAAAAAAAQAA3icnJTPbhtVFMZ/TmzTCsECRVW6ie6CRZHo2FRJ1TYrh9SKRRQHjwtCQkgTz/iPMp4ZeSYO4QlY8xa8RVc8BM+BWKP5fOzYBdEmipJ8d+75851zvnOBHf5mm0r1IfBHPTFcYa9+bniLB/UTw9u061uGqzyp/Wm4RlibG67zea1n+CPeVn8z/ID96k+GH7JbbRv+mGfVHcOfbDv+Mvwp+7xd4Aq84FfDFXbJDG+xw4+Gt3mExaxUeUTTcI3P2DNcZw/oM6EgZkLCCMeQCSOumBGR4xMxY8KQiBBHhxYxhb4mBEKO0X9+DfApmBEo4pgCR4xPTEDO2CL+Iq+Uc2Uc6jSzuxYFYwIu5HFJQIIjZURKQsSl4hQUZLyiQYOcgfhmFOR45EyI8UiZMaJBlzan9BkzIcfRVqSSmU/KkIJrAuV3ZlF2ZkBEQm6srkgIxdOJXyTvDqc4umSyXY98uhHhSxzfybvklsr2Kzz9ujVmm3mXbALm6mesrsS6udYEx7ot87b4VrjgFe5e/dlk8v4ehfpfKPIFV5p/qEklYpLg3C4tfCnId49xHOncwVdHvqdDnxO6vKGvc4sePVqc0afDa/l26eH4mi5nHMujI7y4a0sxZ/yA4xs6siljR9afxcQifiYzdefiOFMdUzL1vGTuqdZIFd59wuUOpRvqyOUz0B6Vlk7zS7RnASNTRSaGU/VyqY3c+heaIqaqpZzt7X25DXPbveUW35Bqh0u1LjiVk1swet9UvXc0c60fj4CQlAtZDEiZ0qDgRrzPCbgixnGs7p1oSwpaK58yz41UEjEVgw6J4szI9Dcw3fjGfbChe2dvSSj/kunlqqr7ZHHq1e2M3qh7yzvfuhytTaBhU03X1DQQ18S0H2mn1vn78s31uqU85YiUmPBfL8AzPJrsc8AhY2UY6GZur0NTL0STlxyq+ksiWQ2l58giHODxnAMOeMnzd/q4ZOKMi1txWc/d4pgjuhx+UBUL+y5HvF59+/+sv4tpU7U4nq5OL+49xSd3UOsX2rPb97KniZWTmFu02604I2BacnG76zW5x3j/AAAA//8BAAD///S3T1F4nGJgZgCD/+cYjBiwAAAAAAD//wEAAP//LwECAwAAAA==");
+}
+.d2-4272314804 .text-italic {
+	font-family: "d2-4272314804-font-italic";
+}
+@font-face {
+	font-family: d2-4272314804-font-italic;
+	src: url("data:application/font-woff;base64,d09GRgABAAAAAA3MAAoAAAAAFXwAARhRAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgW1SVeGNtYXAAAAFUAAAAlQAAAL4DjgP0Z2x5ZgAAAewAAAdXAAAKHGE4Bm5oZWFkAAAJRAAAADYAAAA2G7Ur2mhoZWEAAAl8AAAAJAAAACQLeAjEaG10eAAACaAAAACAAAAAgDe4Aw1sb2NhAAAKIAAAAEIAAABCK+YpSm1heHAAAApkAAAAIAAAACAAOAD2bmFtZQAACoQAAAMmAAAIMgntVzNwb3N0AAANrAAAACAAAAAg/8YAMgADAeEBkAAFAAACigJY//EASwKKAlgARAFeADIBIwAAAgsFAwMEAwkCBCAAAHcAAAADAAAAAAAAAABBREJPAAEAIP//Au7/BgAAA9gBESAAAZMAAAAAAeYClAAAACAAA3icdM09SwIBHIDx33XX23XV9V5X3+YoaAiaam6KwkEEQfwmroovq4sIol/tL6irz/obHiRSCQqZHiqlVK725t2HT99+/Wtq6+hGoPa6sy8//jS0tharWMYi5jGLaUxiHKMYxiD6m8O+EgdSmUNHjp04lTtTOHfhUunKtRu37tx78OhJ5dkLawAAAP//AQAA//8rySNtAAAAeJx8Vm9sG2cd/r3vXe4Sx3Fi3/mudhJf7LPvEvvsxD77Lm5iO47zr4ndJG0TQlsna7uW/slo1CJRtFVjC0wV0ipvqjSBECAxpE2V+NCKD5NgCMGHCqkIoQIbsE+UgFqktVYoYyJndGcndYe0L6fTe+/9/jzv8zy/F1ogCIC/jG8AAW3QCS5wA6iMnyBUXRd5QpVlkaZ1mWHo4KvozqvfIQtH/9b/g/8oAjn9yrtz/3zuJr6xs46+Xn75ZePYtdOnv/DwoRFGf3gIAIAgXdvGUfxdEABaApKUSmaxmuB4WpLEgAO7WY5TE5rOUxQKzJ3Vho5eLQ4v7tMYTdq/Nh4MzI70F/rEYNleuHKwdOOr03p4oE/OPH9ldKSc6utOCFErhwiAu3AF2q26aT+t0iLtp8VNdL7D+Gv4seNjFUkOXMn/fvzJeNP+tqb9RGN39HHHo1Fcyd8fN/7YiA3buAKEuVclxM2Dm7iys7GX96e4Ah7rG8OrurmD0TRdpAmRkEWKoglxs5zmyKlfljfnim1eOzn/CyXDkZSjdRZXjO9du4ZO7mygS8r5yJvG2+j4m8o5xbgO2IodtXpiregJzs1SlCgSjJrQUklJFMXN945fmn3lyLlkfu30+eLMaVyZXV74Utz4BE0vzKfVOv6HAHAeV6ADQCVUhuN4VdN0RkWvj8x3t7QSpCfl/ckR411cMW6kXtBSF5No3WoPEKwBEAqugL/eO0XR9X8ZjnU3oohEUtOtPtfaFmwEQZL8EPf2dBsi2Qh7vWRUT9EYkQ6/8zauGG8l11Op9SQ6Z7yVvKBpF5Lo3M4GeiM4L8tF2bgIABjk2jb6BFWBNRHgA3uEUXWVEM1MckLT9T323B4rKrOrqpxxkkz2RK6VFFdc0nxQcSd6goWUELcfW5r62nG1358xvDOhwbHY4IdSIHygnMhlwMon1LbRI3wH3KYK+IAki7TIqLTZqYW5A8uJLDYBD1A0zXEP5IyTYHPXSzKHg0eiVvpUsJDyDQ0EFsUYq9r7/Rl85/3neiNHl83UY+EDZTWbCYf+LgUAQai2jW6hKvQ8050lB4pys7tq+GD+eaV0IqWMclFG6h1a1tL7+zQu4C3Zz5QnLi8NBjxDvHtiozA+5XUm2BDsYoflpl6eYvf54O13EV1SqdJA72Dos+jJfWvv7wx/Fj5s9fJzVAUvhJrzmUyl/dSesglVMxlrdnh/+Vx07viQnvfZW4xftfUVwr1p3te7+O0aJlwDYmrVfv7E5MYhJbaQ6FEduYWQx6m6BRRq39fRExeWAEEEAL2O7wFvclLMYeuYGvjRlpAjS7n2fFfnwYw37Oq2dTv9A63Ok/ZTS+iddMvi7OGOdp22JSKHs8aKiRmqBVEVVUGAWP389XrdOkWJz7KPoohn0LsZXxaDPZP92VmHRzoymFmIHDgel7JOgsmdYS6nxcVAhIv3iHnVN/gXqTfFB4pjZyVleanwlS8mTD4Sa2eQPxL+rRQYmFoZGhkBgFrN9En4FN/CEvQCAAW+GWu99o2aDP+21oX6+mRdo0ptGz7Fd8BlVp9K6pZO3WwD+hfy1Iulqwg5CYpGNs6ec3rwhZ036DbChfAISdZjCAD4AapC2NJ5g/p8QwCmhTHmAZoAN78KJ3I0KR2W9sdbBldCGY0ks6UMSU67Z5TJ4ihJTnEzkUm0dSAY1/sVNT/s9LHGr5HC7uuYC8eMd56+7daAPkBV2Ndcg5v9/4wDh2LZVGvWzDDTMxOrZ8gPC8Hm4Ht6QH9GVeg0sXzKz7qoLU42RHdvflWZXU3Mrylzq+HooqolzIf97LHJy0ux+nNsfGNifLqwMTE+ZcauPamp6BGq1rVGN1XswKLlIjTzjG/YvpWjiNBSzJJcQhplsEv4UbNv3MW3x4RoQ3DC2e8j1DAO6R8h/945oZdQFbqaMOJpaRebdrK3GPW4u7u8waKQQVtlJdM20ZobMe4Cqv23to2uoirIzSxPJSXZnMnNInKzHG9JmPphvOwZ4sekcGZgOJZWDiix2Z4Yo/qluNaXTQ4dsif7JaE/JnplwZsdiORDQV8/640KPskVGFWiEyGz5tHaNlrB63t+p+mmalVLqU1+995YkkTp6fZiMN/9ov1qmugJOLztzq5Bey7a6e1ArnTLa69ljQcul89na9HpTjP2cG0bfYy2zPm7G/sp+5mG5d3cY+ZM77QyWTSHRP8R+7juFBikGfcYj0kZtGJ4Z8X6zKzdA0C/q8cVGVnlG0NTV2lelCXJmuu08qdjB8OtDprs7OtcOnzn1LzS6rSRXQFmFeH765zsZgfc6/96fImLcZzCXzbjPgFAP0Zb5r1D1JGo+2mk0rZWVPioA2VajZ8ZdgW9lI0a38zunTfcRVu7dw/hROkk2jK81rdpPAe38C3zzsNYvdfFeoXxiTzbK+I5nvP493GePkCWd/wGbUEnAP3U4Sys4rzo9NjYrh6/7WLpoqPwoa0tTdHxCA7ufDS1/D8AAAD//wEAAP//k80QmAAAAQAAAAEYUfv1ge9fDzz1AAED6AAAAADYXaDMAAAAAN1mLzf+vf7dCB0DyQACAAMAAgAAAAAAAAABAAAD2P7vAAAIQP69/bwIHQPoAML/0QAAAAAAAAAAAAAAIAJ0ACQCJgA5AfcAIwHZACMA/AAjAsEAIwImACMB8ABSAvQAXwIZACcCGAAfAbMAJQIXACcB4QAlARoAKwITAAEA7QAfAO7/hAD4ACwDHwAfAg0AHwIDACcCF//2AVYAHwGS//wBRQA8AhAAOAGt/9QBmv/2AO0AHwAAAEcA7v+EAAAALgBgAHgAjgCcAMoA7gEMAUYBfgG2AeQCHAJWAn4CxgLSAt4DAANCA2wDmgPUA/IELgRcBIgEtATMBNoE8AUOAAAAAQAAACAAjAAMAGYABwABAAAAAAAAAAAAAAAAAAQAA3icnJTbThtXFIY/B9tterqoUERu0L5MpWRMoxAl4cqUoIyKcOpxepCqSoM9PojxzMgzmJIn6HXfom+Rqz5Gn6LqdbV/L4MdRUEgBPx79jr8a61/bWCT/9igVr8L/N2cG66x3fzZ8B2+aB4Z3mC/+ZnhOg8b/xhuMGi8NdzkQaNr+BPe1f80/ClP6r8ZvstW/dDw5zyubxr+csPxr+GveMK7Ba7BM/4wXGOLwvAdNvnV8Ab3sJi1OvfYMdzga7YNN9kGekyoSJmQMcIxZMKIM2YklEQkzJgwJGGAI6RNSqWvGbGQY/TBrzERFTNiRRxT4UiJSIkpGVvEt/LKea2MQ51mdtemYkzMiTxOiclw5IzIyUg4VZyKioIXtGhR0hffgoqSgJIJKQE5M0a06HDIET3GTChxHCqSZxaRM6TinFj5nVn4zvRJyCiN1RkZA/F04pfIO+QIR4dCtquRj9YiPMTxo7w9t1y23xLo160wW8+7ZBMzVz9TdSXVzbkmONatz9vmB+GKF7hb9WedyfU9Guh/pcgnnGn+A00qE5MM57ZoE0lBkbuPY1/nkEgd+YmQHq/o8Iaezm26dGlzTI+Ql/Lt0MXxHR2OOZBHKLy4O5RijvkFx/eEsvGxE+vPYmIJv1OYuktxnKmOKYV67pkHqjVRhTefsN+hfE0dpXz62iNv6TS/THsWMzJVFGI4VS+X2iitfwNTxFS1+Nle3fttmNvuLbf4glw77NW64OQnt2B03VSD9zRzrp+AmAE5J7LokzOlRcWFeL8m5owUx4G690pbUtG+9PF5LqSShKkYhGSKM6PQ39h0Exn3/prunb0lA/l7pqeXVd0mi1Ovrmb0Rt1b3kXW5WRlAi2bar6ipr64Zqb9RDu1yj+Sb6nXLecRoeIudvtDr8AOz9llj7Gy9HUzv7zzr4S32FMHTklkNZSmfQ2PCdgl4Cm77PKcp+/1csnGGR+3xmc1f5sD9umwd201C9sO+7xci/bxzH+J7Y7qcTy6PD279TQf3EC132jfrt7NribnpzG3aFfbcUzM1HNxW6s1ufsE/wMAAP//AQAA//9yoVFAAAAAAwAA//UAAP/OADIAAAAAAAAAAAAAAAAAAAAAAAAAAA==");
+}]]></style><style type="text/css"><![CDATA[.shape {
+  shape-rendering: geometricPrecision;
+  stroke-linejoin: round;
+}
+.connection {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.blend {
+  mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+
+		.d2-4272314804 .fill-N1{fill:#0A0F25;}
+		.d2-4272314804 .fill-N2{fill:#676C7E;}
+		.d2-4272314804 .fill-N3{fill:#9499AB;}
+		.d2-4272314804 .fill-N4{fill:#CFD2DD;}
+		.d2-4272314804 .fill-N5{fill:#DEE1EB;}
+		.d2-4272314804 .fill-N6{fill:#EEF1F8;}
+		.d2-4272314804 .fill-N7{fill:#FFFFFF;}
+		.d2-4272314804 .fill-B1{fill:#0D32B2;}
+		.d2-4272314804 .fill-B2{fill:#0D32B2;}
+		.d2-4272314804 .fill-B3{fill:#E3E9FD;}
+		.d2-4272314804 .fill-B4{fill:#E3E9FD;}
+		.d2-4272314804 .fill-B5{fill:#EDF0FD;}
+		.d2-4272314804 .fill-B6{fill:#F7F8FE;}
+		.d2-4272314804 .fill-AA2{fill:#4A6FF3;}
+		.d2-4272314804 .fill-AA4{fill:#EDF0FD;}
+		.d2-4272314804 .fill-AA5{fill:#F7F8FE;}
+		.d2-4272314804 .fill-AB4{fill:#EDF0FD;}
+		.d2-4272314804 .fill-AB5{fill:#F7F8FE;}
+		.d2-4272314804 .stroke-N1{stroke:#0A0F25;}
+		.d2-4272314804 .stroke-N2{stroke:#676C7E;}
+		.d2-4272314804 .stroke-N3{stroke:#9499AB;}
+		.d2-4272314804 .stroke-N4{stroke:#CFD2DD;}
+		.d2-4272314804 .stroke-N5{stroke:#DEE1EB;}
+		.d2-4272314804 .stroke-N6{stroke:#EEF1F8;}
+		.d2-4272314804 .stroke-N7{stroke:#FFFFFF;}
+		.d2-4272314804 .stroke-B1{stroke:#0D32B2;}
+		.d2-4272314804 .stroke-B2{stroke:#0D32B2;}
+		.d2-4272314804 .stroke-B3{stroke:#E3E9FD;}
+		.d2-4272314804 .stroke-B4{stroke:#E3E9FD;}
+		.d2-4272314804 .stroke-B5{stroke:#EDF0FD;}
+		.d2-4272314804 .stroke-B6{stroke:#F7F8FE;}
+		.d2-4272314804 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-4272314804 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-4272314804 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-4272314804 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-4272314804 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-4272314804 .background-color-N1{background-color:#0A0F25;}
+		.d2-4272314804 .background-color-N2{background-color:#676C7E;}
+		.d2-4272314804 .background-color-N3{background-color:#9499AB;}
+		.d2-4272314804 .background-color-N4{background-color:#CFD2DD;}
+		.d2-4272314804 .background-color-N5{background-color:#DEE1EB;}
+		.d2-4272314804 .background-color-N6{background-color:#EEF1F8;}
+		.d2-4272314804 .background-color-N7{background-color:#FFFFFF;}
+		.d2-4272314804 .background-color-B1{background-color:#0D32B2;}
+		.d2-4272314804 .background-color-B2{background-color:#0D32B2;}
+		.d2-4272314804 .background-color-B3{background-color:#E3E9FD;}
+		.d2-4272314804 .background-color-B4{background-color:#E3E9FD;}
+		.d2-4272314804 .background-color-B5{background-color:#EDF0FD;}
+		.d2-4272314804 .background-color-B6{background-color:#F7F8FE;}
+		.d2-4272314804 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-4272314804 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-4272314804 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-4272314804 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-4272314804 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-4272314804 .color-N1{color:#0A0F25;}
+		.d2-4272314804 .color-N2{color:#676C7E;}
+		.d2-4272314804 .color-N3{color:#9499AB;}
+		.d2-4272314804 .color-N4{color:#CFD2DD;}
+		.d2-4272314804 .color-N5{color:#DEE1EB;}
+		.d2-4272314804 .color-N6{color:#EEF1F8;}
+		.d2-4272314804 .color-N7{color:#FFFFFF;}
+		.d2-4272314804 .color-B1{color:#0D32B2;}
+		.d2-4272314804 .color-B2{color:#0D32B2;}
+		.d2-4272314804 .color-B3{color:#E3E9FD;}
+		.d2-4272314804 .color-B4{color:#E3E9FD;}
+		.d2-4272314804 .color-B5{color:#EDF0FD;}
+		.d2-4272314804 .color-B6{color:#F7F8FE;}
+		.d2-4272314804 .color-AA2{color:#4A6FF3;}
+		.d2-4272314804 .color-AA4{color:#EDF0FD;}
+		.d2-4272314804 .color-AA5{color:#F7F8FE;}
+		.d2-4272314804 .color-AB4{color:#EDF0FD;}
+		.d2-4272314804 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="viz"><g class="shape" ><rect x="172.000000" y="0.000000" width="116.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="230.000000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Visualizer</text></g><g id="map"><g class="shape" ><rect x="444.000000" y="187.000000" width="74.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="481.000000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Map</text></g><g id="plugin"><g class="shape" ><rect x="0.000000" y="374.000000" width="97.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="48.500000" y="412.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Plugins</text></g><g id="mantle"><g class="shape" ><rect x="478.000000" y="374.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="525.500000" y="412.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mantle</text></g><g id="engine"><g class="shape" ><rect x="548.000000" y="0.000000" width="93.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="594.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Engine</text></g><g id="crust"><g class="shape" ><rect x="167.000000" y="187.000000" width="83.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="208.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Crust</text></g><g id="infobox"><g class="shape" ><rect x="319.000000" y="374.000000" width="99.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="368.500000" y="412.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Infobox</text></g><g id="was"><g class="shape" ><rect x="157.000000" y="374.000000" width="102.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="208.000000" y="412.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Widgets</text></g><g id="cesium"><g class="shape" ><rect x="650.000000" y="187.000000" width="97.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="698.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Cesium</text></g><g id="feature"><g class="shape" ><rect x="649.000000" y="374.000000" width="99.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="698.500000" y="412.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Feature</text></g><g id="(viz -&gt; crust)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 221.463568 67.949133 C 210.782353 114.400000 208.000000 138.700000 208.000000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4272314804)" /><text x="209.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">use</text></g><g id="(crust -&gt; plugin)[0]"><path d="M 164.774604 245.339025 C 72.100000 299.665517 48.500000 325.700000 48.500000 370.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4272314804)" /><text x="83.500000" y="299.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">use</text></g><g id="(crust -&gt; was)[0]"><path d="M 208.000000 255.000000 C 208.000000 301.400000 208.000000 325.700000 208.000000 370.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4272314804)" /><text x="208.500000" y="319.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">use</text></g><g id="(crust -&gt; infobox)[0]"><path d="M 252.224429 245.189100 C 344.900000 299.635202 368.500000 325.700000 368.500000 370.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4272314804)" /><text x="333.500000" y="299.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">use</text></g><g id="(viz -&gt; map)[0]"><path d="M 290.315949 60.421384 C 404.500000 113.116667 439.700000 138.700000 462.687801 183.934059" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4272314804)" /><text x="391.500000" y="112.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">use</text></g><g id="(engine -&gt; map)[0]"><path d="M 562.139863 67.452518 C 517.702941 114.400000 503.050000 138.700000 491.264851 183.630882" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4272314804)" /><text x="514.500000" y="125.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">inject</text></g><g id="(engine -&gt; mantle)[0]"><path d="M 585.409859 67.932126 C 572.985294 114.400000 569.750000 145.200000 569.750000 173.250000 C 569.750000 201.300000 563.950000 325.700000 542.467435 370.887464" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4272314804)" /><text x="568.500000" y="227.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">use</text></g><g id="(engine -&gt; cesium)[0]"><path d="M 632.763502 67.340700 C 684.855882 114.400000 698.250000 138.700000 698.250000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4272314804)" /><text x="685.500000" y="122.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">use</text></g><g id="(cesium -&gt; feature)[0]"><path d="M 698.250000 255.000000 C 698.250000 301.400000 698.250000 325.700000 698.250000 370.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4272314804)" /><text x="698.500000" y="319.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">use</text></g><g id="(map -&gt; mantle)[0]"><path d="M 481.250000 255.000000 C 481.250000 301.400000 487.050000 325.700000 508.532565 370.887464" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-4272314804)" /><text x="484.500000" y="322.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">use</text></g><mask id="d2-4272314804" maskUnits="userSpaceOnUse" x="-101" y="-101" width="950" height="642">
+<rect x="-101" y="-101" width="950" height="642" fill="white"></rect>
+<rect x="198.000000" y="116.000000" width="23" height="21" fill="black"></rect>
+<rect x="72.000000" y="283.000000" width="23" height="21" fill="black"></rect>
+<rect x="197.000000" y="303.000000" width="23" height="21" fill="black"></rect>
+<rect x="322.000000" y="283.000000" width="23" height="21" fill="black"></rect>
+<rect x="380.000000" y="96.000000" width="23" height="21" fill="black"></rect>
+<rect x="496.000000" y="109.000000" width="37" height="21" fill="black"></rect>
+<rect x="557.000000" y="211.000000" width="23" height="21" fill="black"></rect>
+<rect x="674.000000" y="106.000000" width="23" height="21" fill="black"></rect>
+<rect x="687.000000" y="303.000000" width="23" height="21" fill="black"></rect>
+<rect x="473.000000" y="306.000000" width="23" height="21" fill="black"></rect>
+</mask></svg></svg>
diff --git a/web/src/beta/core/docs/dataFlow.d2 b/web/src/beta/core/docs/dataFlow.d2
new file mode 100644
index 0000000000..e0b8bb70dd
--- /dev/null
+++ b/web/src/beta/core/docs/dataFlow.d2
@@ -0,0 +1,22 @@
+user: user
+data: data
+layer: Layer
+feature: Feature
+computedLayer: ComputedLayer
+computedFeature: ComputedFeature
+eval: Evaluator
+mantle: mantle
+layersComponent: Map/Layers
+layerComponent: Map/Layer
+featureComponent: engines/Cesium/Feature
+
+user -> data: add
+data -> layersComponent: add
+layersComponent -> layerComponent: eval each layer
+layerComponent <-> mantle: store layer
+mantle -> eval: evaluate layer and each features
+eval -> layer: compute
+eval -> feature: compute
+layer -> computedLayer
+feature -> computedFeature
+layerComponent -> featureComponent: display each feature
diff --git a/web/src/beta/core/docs/dataFlow.svg b/web/src/beta/core/docs/dataFlow.svg
new file mode 100644
index 0000000000..a1c031fd9a
--- /dev/null
+++ b/web/src/beta/core/docs/dataFlow.svg
@@ -0,0 +1,109 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="0.4.0" preserveAspectRatio="xMinYMin meet" viewBox="0 0 721 1556"><svg id="d2-svg" class="d2-1065501651" width="721" height="1556" viewBox="-101 -101 721 1556"><rect x="-101.000000" y="-101.000000" width="721.000000" height="1556.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+.d2-1065501651 .text-bold {
+	font-family: "d2-1065501651-font-bold";
+}
+@font-face {
+	font-family: d2-1065501651-font-bold;
+	src: url("data:application/font-woff;base64,d09GRgABAAAAAAy0AAoAAAAAE5wAAguFAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgXxHXrmNtYXAAAAFUAAAAjAAAAKoC2wMSZ2x5ZgAAAeAAAAZeAAAIbI4/N65oZWFkAAAIQAAAADYAAAA2G38e1GhoZWEAAAh4AAAAJAAAACQKfwXcaG10eAAACJwAAAB0AAAAdDZmBNtsb2NhAAAJEAAAADwAAAA8HvwhUm1heHAAAAlMAAAAIAAAACAANQD3bmFtZQAACWwAAAMoAAAIKgjwVkFwb3N0AAAMlAAAAB0AAAAg/9EAMgADAioCvAAFAAACigJYAAAASwKKAlgAAAFeADIBKQAAAgsHAwMEAwICBGAAAvcAAAADAAAAAAAAAABBREJPACAAIP//Au7/BgAAA9gBESAAAZ8AAAAAAfAClAAAACAAA3icbMy7bcIAFEDR49hxfk7i/JyEig0YAkEFQ1hUSBSIAokFmAOBYAcamIWaIR4CUXLLU1wkUgkKmTkqpVSuqaWtq682NDY1i+DqHT21gZHJ2eMQx9jHLraxiXWsYhmLy/VWiYY7qcy93INHT569KLx686704dOXbz8qv/78cwIAAP//AQAA//9clx3beJxcVVts29YZ/s8RRcY0HZuiKIqSqBslUpJtORJFMb7KsmU7dqz4EsRJWl/SoOhlzqVInMXrPOyhQYF1DoZB2ZY1wNYNG7YB7UNRDNgKeAP2sM3o3tyuT8u2bA9DXyIUxtBiMjWQkm95kA6B8+M/3+0/B5wwC4Cv4gfggBZoBxfwABobYeOaqsqUoRmGLDgMFbHULHaZP/+ZmiSSSSIVfhh6fWUFlZfxg71rz5evXv3vSn+/+aPffmjeR7c/BECQru/iU/gh+AGcUUXRc/m8lvUIlKLIUZLk3R4tmzcEEi3Nv3X+wv35wouRc6Ihd012LpxJFLzn5pnp712/9sM5LbosSNnlkRdfi4mLVwBBGQA9xZvQauPkI7zGy3yEL6OH5v8eP0bteHPjja9/fwOgWfsfvAktR2vL6JH5xZMneHPjBxt7cFD3BG+C06qzKssVhPHmXnXjYB+/hzchZO9zHo+g5fMGp7GyRcuQKUpWVTmIeb78k1dpF03QLP3yO29SLQ5CX5pbyhHECQpvmo8DQ8HgUABF99aehmdmQ4++/PJRaHYm/BQAQ6q+iz5GNRBBBhCilmCGrRWl2srxrKzKJGlk84Zu6/e70uy9CpaToeGY3rPat/LSOk2EJk6Ice7cQIi5WDh3qT2ievkXpNiNW+a/tYB8S+Au0p2SV7A5xeq7aAvVwPesP3L00B0SiWM3i2e+WkpPBMbksF4onPKmub74AjN4Z/782mBQWJGmi8Nlvv1K2G9phUGt76Ia3gIOwvs87Maqrh1hoDSP+XzxZv9KLnlaJCvrNOEbx17VxXW65XwP8+2vzd0ZCninf7U3mvHJ627xI9fJ0YnJMcA29n+iGngtR46g9/Bukop4PFrWwu7QctYpKDRxa2T0Wv/EUg+BzU/p8YyezyjLb3+gdkXzzNDa/NxaobBa4uIteS1y2RdEfUm9p+G7FwCt4W1rtbw2joeYt+LEPjcyEpsdDeU6/G0+xh+8fBl947rTry/kGPKa0xlRgrfNNwAcEK13YwrVoAf6YcpWRtFzlhCW0fo+BUHjZZsGKUdV2wfLejdJOrJ5PdcUjWt8y1HFLvm8b/n0BOcPe33JvmW9K/LrGaold8mQQq5ocnbxhdLGlKSqkqSqyeywGtfECOMf3PGd7hpIEG2JkD/bQbhKnQMzCWa1NerunYrR7R7O1T+qzaXRdiqpJhOJZMqsxEShw+HwigGpoU3RMhtvgdueCZ7aDylro6TYYoUKnM3OTVakcCDhxVvvXhY7V5fMv6BIPiEK5vtQr4MBAH/DO1ixbgmgIABvNXrXd5ELb0F7I0Gsxh4E8s/T/RW2xUmRLibOPH8Wy3ufCi6ErjupBiaHhGoQsTFZQ2q5dQwZdbAWrXkZz+hFLjKVmT1bkcLxU9ZfD6oOh7o7E9HMPtxT5vvNZZ83qjV5N884ynudJsLlA+KoWgh2H+PdyK+dhfZnbkfbafWI08hTuFkq3SwUbpRKNwrd6XR3uru7OXuDa+fn7wzeLQ8Xp60RtPoW62ewB9WAgyCAcIjOjpOiCrydHDlK8R6PhVOaVJ97ZWAlHx7wOWeU/EJnyp34Df5lxid/6/aF9YJfnPkuio1Pv9n9ketk03P0HVQD1zF9G9PQYO6fVvgA7W0TOwKDblS9mM04nd8kiGTW/Acg4Ou76MeoBqrtq2pYk2qRVdQ01nOHzXi3Rwhi3k3uZF5WRqKFUCQopX3B/sSrF3ovhkZ8OV9vrxIeTL7CKKFF0S9wrIejmVhvcmxB9V5ye1SveLJV7k2PLjWyytZ30Q28BoKttq7LumFo9mNweNHB4kxpmn397l1ZYkRa4AzmKwvb18l7927/KRUniVWSafQaqO+iL1DV8v9YNtnm9fbXuclKMBxQPJX1VkdoilldQjnz73rSJ6EzZsdYvAsQMACojqrQBqA5NKH5nhia44NfPBimOZpo4eji/Z+i6mfxsqqW45+ZHfbZTH0I7aGqlZpD/QzjWIuTeN0TafdRrhPxBE39/sFEq4smTrAtA/ffFU7P/IEkXkPOmORD//okOh6XJ+RPzNahC6kGt7b6FZTHfwQHgMBpjrbtK9vvOF6qvd30Hj5GVWvPeiOLFVQ1OwDV38O9cB7vWO8xa9/2jcDF0+l4PJ3GvSlZTlk/+D8AAAD//wEAAP//Nie5dQAAAAEAAAACC4W8ktl3Xw889QABA+gAAAAA2F2ghAAAAADdZi82/jf+xAhtA/EAAQADAAIAAAAAAAAAAQAAA9j+7wAACJj+N/43CG0AAQAAAAAAAAAAAAAAAAAAAB0CsgBQAMgAAAJGAC4CJABNAgwATQIGAE0C+gBNAg8AKgHTACQCPQAnAgYAJAFVABgCFgAiAjsAQQEUADcBHgBBA1kAQQI8AEECKwAkAj0AQQGOAEEBuwAVAX8AEQI4ADwCCwAMAgkADAFTAA0BFABBAAD/rQAAACwALABYAG4AggCSAMQA/AEoAVoBjgG0AhwCPgJKAmYCmAK6AuYDFgM2A3IDmAO6A9YEBgQUBCAENgABAAAAHQCQAAwAYwAHAAEAAAAAAAAAAAAAAAAABAADeJyclM9uG1UUxn9ObNMKwQJFVbqJ7oJFkejYVEnVNiuH1IpFFAePC0JCSBPP+I8ynhl5Jg7hCVjzFrxFVzwEz4FYo/l87NgF0SaKknx37vnznXO+c4Ed/mabSvUh8Ec9MVxhr35ueIsH9RPD27TrW4arPKn9abhGWJsbrvN5rWf4I95WfzP8gP3qT4YfslttG/6YZ9Udw59sO/4y/Cn7vF3gCrzgV8MVdskMb7HDj4a3eYTFrFR5RNNwjc/YM1xnD+gzoSBmQsIIx5AJI66YEZHjEzFjwpCIEEeHFjGFviYEQo7Rf34N8CmYESjimAJHjE9MQM7YIv4ir5RzZRzqNLO7FgVjAi7kcUlAgiNlREpCxKXiFBRkvKJBg5yB+GYU5HjkTIjxSJkxokGXNqf0GTMhx9FWpJKZT8qQgmsC5XdmUXZmQERCbqyuSAjF04lfJO8Opzi6ZLJdj3y6EeFLHN/Ju+SWyvYrPP26NWabeZdsAubqZ6yuxLq51gTHui3ztvhWuOAV7l792WTy/h6F+l8o8gVXmn+oSSVikuDcLi18Kch3j3Ec6dzBV0e+p0OfE7q8oa9zix49WpzRp8Nr+Xbp4fiaLmccy6MjvLhrSzFn/IDjGzqyKWNH1p/FxCJ+JjN15+I4Ux1TMvW8ZO6p1kgV3n3C5Q6lG+rI5TPQHpWWTvNLtGcBI1NFJoZT9XKpjdz6F5oipqqlnO3tfbkNc9u95RbfkGqHS7UuOJWTWzB631S9dzRzrR+PgJCUC1kMSJnSoOBGvM8JuCLGcazunWhLClornzLPjVQSMRWDDonizMj0NzDd+MZ9sKF7Z29JKP+S6eWqqvtkcerV7YzeqHvLO9+6HK1NoGFTTdfUNBDXxLQfaafW+fvyzfW6pTzliJSY8F8vwDM8muxzwCFjZRjoZm6vQ1MvRJOXHKr6SyJZDaXnyCIc4PGcAw54yfN3+rhk4oyLW3FZz93imCO6HH5QFQv7Lke8Xn37/6y/i2lTtTierk4v7j3FJ3dQ6xfas9v3sqeJlZOYW7TbrTgjYFpycbvrNbnHeP8AAAD//wEAAP//9LdPUXicYmBmAIP/5xiMGLAAAAAAAP//AQAA//8vAQIDAAAA");
+}
+.d2-1065501651 .text-italic {
+	font-family: "d2-1065501651-font-italic";
+}
+@font-face {
+	font-family: d2-1065501651-font-italic;
+	src: url("data:application/font-woff;base64,d09GRgABAAAAAAy8AAoAAAAAFCQAARhRAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgW1SVeGNtYXAAAAFUAAAAjAAAAKoC2wMSZ2x5ZgAAAeAAAAZmAAAI7Nxguh1oZWFkAAAISAAAADYAAAA2G7Ur2mhoZWEAAAiAAAAAJAAAACQLeAjBaG10eAAACKQAAAB0AAAAdDHqAxxsb2NhAAAJGAAAADwAAAA8IHAi0G1heHAAAAlUAAAAIAAAACAANQD2bmFtZQAACXQAAAMmAAAIMgntVzNwb3N0AAAMnAAAACAAAAAg/8YAMgADAeEBkAAFAAACigJY//EASwKKAlgARAFeADIBIwAAAgsFAwMEAwkCBCAAAHcAAAADAAAAAAAAAABBREJPAAEAIP//Au7/BgAAA9gBESAAAZMAAAAAAeYClAAAACAAA3icbMy7bcIAFEDR49hxfk7i/JyEig0YAkEFQ1hUSBSIAokFmAOBYAcamIWaIR4CUXLLU1wkUgkKmTkqpVSuqaWtq682NDY1i+DqHT21gZHJ2eMQx9jHLraxiXWsYhmLy/VWiYY7qcy93INHT569KLx686704dOXbz8qv/78cwIAAP//AQAA//9clx3beJx8VVtsG1kZ/s+Z8Uwujht77HHsOB7bMx7fxteJZ+ImtmM7Fye2m6bdlLCt003ZrbplQRFFULRUC620qhAsoeoLKwQrLtKivmVfQEIgLkIRUiWQCiyCF9gli7ZI3VrRClabGTRjN3H6wMvI0jn+/u/7zvedAxYQAPBn8V0gYBBOgANcADITJAhZVXk3IUciPE2rEYahhZto9+brZO3Zf0bf+K/EkYtf/XHj38/dw3cPXkJfab/yinb+9gsvfOLhQy2O/vQQAABBQd/HSfwd4AAsIVHMT5awnGPdtCjyIRt2OVlWzimqm6JQqHFFyTx7ozm1OqYwinjyYlUILU9HawFeaFtr10+17n5xUY3HApHi89dnptv5wHiOS5ozeAA8irdh2ORNB2mZ5ukgzd9CV0e0d+KPbY9kJNrwduWP1Q+rffsH+/YTvd3JxyMfzODtyrtV7c89bHQHb4PF2CsTBuqpLyDnCN4+2HmC9TO8DR5znXHLKiMTPKMoKk8TPBHhKYom+FvtAksu/Lp9q9Ec9FrJlV9KRZakbAPLeFv77u3b6NLBFvqcdDVxR/shunBHelHSXgMMEX0f/Qd1wGlMcYcOzZNVmeBVnqIiOUVVD518a7YpLW/IkaKdZEqb5QGSX3eIK4LkyvmEWp7LWs+vLXzpghwNFjVvPZyeTaX/IobiS+1cudg9q7C+j3ZQB3zHpplHRVEu55OTenvleam1mZdm2CQjTmTOKYWTAYUNeVvWy+25a2vpkCfjds1t1aoLXnvOGTawTS04gnfBZaTtmJb/L+akgxgVW9s9NafCT6uJBC7+/GDqaTnY1PIL1AEvhPvnsS4nRQepw9QRsqLkJ02F7557Mdm4kFErfqtF+81goBafKLj9E6vf1jHhiPH5DevVzfmtM1LqdM4n28qnwx677OJQeHhsxJfl1gBBAgB9Az8At5EFvowV5cg/2gxZYq08XBk9carojTvGh8btwdiA/ZL1U2vozYJldfnsyLBKD+USZ0vauuEZ0gXUQR3gIGVqiKhd3ipF8cfTQFHEMffuZc/xgm8+Wlq2ecRn0sXTiaULWbFkJ5jyZeZagV8NJdisj6/I/vTfxIm8O9ScvSJK59Zqn/9kzsgHcfEyCibivxdDsYX1zPR0Nx8cAHob7/ayTtOyKdDlpM3A5ycNmQT3WiszSsbOSKX8QKk5Q5J1Xz01j3cfFvl0ZYoTtN8hyTk20ointDd13cCEj/AOFmEcACjw1buzJH0fPsK74DCU5yeNVhkZ7B3bZyrUy60bCNkJikZDrLVs9+BPH3yLHiQcCE+T5CFf/D7qQLzLt0vX3SNNHWPdL2CzTJPiWfFk1pJeDxcVkiy1iiS56KpL84aeBbaemEd7S0JWjUpyZcrud/ZrOvp15BnqwFg/h6ctMybGzqSOOWZOeNqwwy6hv6IOnICJ/my7nDYcyZl57hX2wcqGtLyRW7koNTbiyVVZyRkf65Xz89fWUt3vbHVrrrpY25qrLhjY+oe6jD5AnW5P6T7GNsyHROMlYHIl3B1B0yw79LUyRYTXUmZdc+IMgx3cj4Ra3p+JhVb5lFO+j9+a5ZK9snJXvodQfKktl4px8V/h4FGuvow6MNrnkZsWn3gzTE40kx7X+KhXaHJFtNeWioNzA+Vp7T4g/WN9H91AHYj0NyQ/KUaMt6a/gC4n6zbrT/0g2/Zk3LNivBibShWkJSm17EsxclDMKoHSZOaMdTIqctEU741w3lIsUQkL/qjTm+T8oiM0IyXnwgbnGX0freOXDu9KRTUaL5st77srfzo7SaLC4nBTqIy/bL1RIHwhm3fYPpq2lpMnvCPIUbC8+mpJe9/h8PuHLCp9wsCe0vfRI7Rn9OwJ9lH6md51ee8wmfWJRWm+aVz40WesVdXOMUjRHjAeIzJoXfMu83LX52kA9He0ByMAMiEzLOuWFQMQ3VxsCiRFknaB+WZLO0B72nt8gxeWBOTRvOZ/9V/pafQO2gMvAG36bF5Ex1BsmBoK2DwOR7jicZxtipYBgrSHHV9vav/wTNf/QNOFwWKOR+9pj4Itnm+GkP3gcboldfF/oj+Hvo9/CwQAjWRURztTWusN4vLHrx9mBO6jPWPdeIe5zdYltGeSQ7CIG7CDd4z3nzH96hb8OuPn3c4JHjfcrCc4xnoC/wMAAP//AQAA//8xd9DFAAAAAQAAAAEYUSmYM79fDzz1AAED6AAAAADYXaDMAAAAAN1mLzf+vf7dCB0DyQACAAMAAgAAAAAAAAABAAAD2P7vAAAIQP69/bwIHQPoAML/0QAAAAAAAAAAAAAAHQJ0ACQAyAAAAiYAOQH3ACMB2QAjAc4AIwLBACMCGQAnAbMAJQIXACcB4QAlARoAKwITAAECCwAfAO0AHwD4ACwDHwAfAg0AHwIDACcCF//2AVYAHwGS//wBRQA8AhAAOAHAADsBwP/CAVT/uADtAB8AAABHAAAALgAuAGAAeACOAJ4AzAEEATIBagGkAcwCFAI+AkoCbAKuAtgDBgNAA14DmgPIA/QEEgRCBFIEYAR2AAEAAAAdAIwADABmAAcAAQAAAAAAAAAAAAAAAAAEAAN4nJyU204bVxSGPwfbbXq6qFBEbtC+TKVkTKMQJeHKlKCMinDqcXqQqkqDPT6I8czIM5iSJ+h136Jvkas+Rp+i6nW1fy+DHUVBIAT8e/Y6/Gutf21gk//YoFa/C/zdnBuusd382fAdvmgeGd5gv/mZ4ToPG/8YbjBovDXc5EGja/gT3tX/NPwpT+q/Gb7LVv3Q8Oc8rm8a/nLD8a/hr3jCuwWuwTP+MFxji8LwHTb51fAG97CYtTr32DHc4Gu2DTfZBnpMqEiZkDHCMWTCiDNmJJREJMyYMCRhgCOkTUqlrxmxkGP0wa8xERUzYkUcU+FIiUiJKRlbxLfyynmtjEOdZnbXpmJMzIk8TonJcOSMyMlIOFWcioqCF7RoUdIX34KKkoCSCSkBOTNGtOhwyBE9xkwocRwqkmcWkTOk4pxY+Z1Z+M70ScgojdUZGQPxdOKXyDvkCEeHQrarkY/WIjzE8aO8Pbdctt8S6NetMFvPu2QTM1c/U3Ul1c25JjjWrc/b5gfhihe4W/Vnncn1PRrof6XIJ5xp/gNNKhOTDOe2aBNJQZG7j2Nf55BIHfmJkB6v6PCGns5tunRpc0yPkJfy7dDF8R0djjmQRyi8uDuUYo75Bcf3hLLxsRPrz2JiCb9TmLpLcZypjimFeu6ZB6o1UYU3n7DfoXxNHaV8+tojb+k0v0x7FjMyVRRiOFUvl9oorX8DU8RUtfjZXt37bZjb7i23+IJcO+zVuuDkJ7dgdN1Ug/c0c66fgJgBOSey6JMzpUXFhXi/JuaMFMeBuvdKW1LRvvTxeS6kkoSpGIRkijOj0N/YdBMZ9/6a7p29JQP5e6anl1XdJotTr65m9EbdW95F1uVkZQItm2q+oqa+uGam/UQ7tco/km+p1y3nEaHiLnb7Q6/ADs/ZZY+xsvR1M7+886+Et9hTB05JZDWUpn0NjwnYJeApu+zynKfv9XLJxhkft8ZnNX+bA/bpsHdtNQvbDvu8XIv28cx/ie2O6nE8ujw9u/U0H9xAtd9o367eza4m56cxt2hX23FMzNRzcVurNbn7BP8DAAD//wEAAP//cqFRQAAAAAMAAP/1AAD/zgAyAAAAAAAAAAAAAAAAAAAAAAAAAAA=");
+}]]></style><style type="text/css"><![CDATA[.shape {
+  shape-rendering: geometricPrecision;
+  stroke-linejoin: round;
+}
+.connection {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.blend {
+  mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+
+		.d2-1065501651 .fill-N1{fill:#0A0F25;}
+		.d2-1065501651 .fill-N2{fill:#676C7E;}
+		.d2-1065501651 .fill-N3{fill:#9499AB;}
+		.d2-1065501651 .fill-N4{fill:#CFD2DD;}
+		.d2-1065501651 .fill-N5{fill:#DEE1EB;}
+		.d2-1065501651 .fill-N6{fill:#EEF1F8;}
+		.d2-1065501651 .fill-N7{fill:#FFFFFF;}
+		.d2-1065501651 .fill-B1{fill:#0D32B2;}
+		.d2-1065501651 .fill-B2{fill:#0D32B2;}
+		.d2-1065501651 .fill-B3{fill:#E3E9FD;}
+		.d2-1065501651 .fill-B4{fill:#E3E9FD;}
+		.d2-1065501651 .fill-B5{fill:#EDF0FD;}
+		.d2-1065501651 .fill-B6{fill:#F7F8FE;}
+		.d2-1065501651 .fill-AA2{fill:#4A6FF3;}
+		.d2-1065501651 .fill-AA4{fill:#EDF0FD;}
+		.d2-1065501651 .fill-AA5{fill:#F7F8FE;}
+		.d2-1065501651 .fill-AB4{fill:#EDF0FD;}
+		.d2-1065501651 .fill-AB5{fill:#F7F8FE;}
+		.d2-1065501651 .stroke-N1{stroke:#0A0F25;}
+		.d2-1065501651 .stroke-N2{stroke:#676C7E;}
+		.d2-1065501651 .stroke-N3{stroke:#9499AB;}
+		.d2-1065501651 .stroke-N4{stroke:#CFD2DD;}
+		.d2-1065501651 .stroke-N5{stroke:#DEE1EB;}
+		.d2-1065501651 .stroke-N6{stroke:#EEF1F8;}
+		.d2-1065501651 .stroke-N7{stroke:#FFFFFF;}
+		.d2-1065501651 .stroke-B1{stroke:#0D32B2;}
+		.d2-1065501651 .stroke-B2{stroke:#0D32B2;}
+		.d2-1065501651 .stroke-B3{stroke:#E3E9FD;}
+		.d2-1065501651 .stroke-B4{stroke:#E3E9FD;}
+		.d2-1065501651 .stroke-B5{stroke:#EDF0FD;}
+		.d2-1065501651 .stroke-B6{stroke:#F7F8FE;}
+		.d2-1065501651 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-1065501651 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-1065501651 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-1065501651 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-1065501651 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-1065501651 .background-color-N1{background-color:#0A0F25;}
+		.d2-1065501651 .background-color-N2{background-color:#676C7E;}
+		.d2-1065501651 .background-color-N3{background-color:#9499AB;}
+		.d2-1065501651 .background-color-N4{background-color:#CFD2DD;}
+		.d2-1065501651 .background-color-N5{background-color:#DEE1EB;}
+		.d2-1065501651 .background-color-N6{background-color:#EEF1F8;}
+		.d2-1065501651 .background-color-N7{background-color:#FFFFFF;}
+		.d2-1065501651 .background-color-B1{background-color:#0D32B2;}
+		.d2-1065501651 .background-color-B2{background-color:#0D32B2;}
+		.d2-1065501651 .background-color-B3{background-color:#E3E9FD;}
+		.d2-1065501651 .background-color-B4{background-color:#E3E9FD;}
+		.d2-1065501651 .background-color-B5{background-color:#EDF0FD;}
+		.d2-1065501651 .background-color-B6{background-color:#F7F8FE;}
+		.d2-1065501651 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-1065501651 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-1065501651 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-1065501651 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-1065501651 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-1065501651 .color-N1{color:#0A0F25;}
+		.d2-1065501651 .color-N2{color:#676C7E;}
+		.d2-1065501651 .color-N3{color:#9499AB;}
+		.d2-1065501651 .color-N4{color:#CFD2DD;}
+		.d2-1065501651 .color-N5{color:#DEE1EB;}
+		.d2-1065501651 .color-N6{color:#EEF1F8;}
+		.d2-1065501651 .color-N7{color:#FFFFFF;}
+		.d2-1065501651 .color-B1{color:#0D32B2;}
+		.d2-1065501651 .color-B2{color:#0D32B2;}
+		.d2-1065501651 .color-B3{color:#E3E9FD;}
+		.d2-1065501651 .color-B4{color:#E3E9FD;}
+		.d2-1065501651 .color-B5{color:#EDF0FD;}
+		.d2-1065501651 .color-B6{color:#F7F8FE;}
+		.d2-1065501651 .color-AA2{color:#4A6FF3;}
+		.d2-1065501651 .color-AA4{color:#EDF0FD;}
+		.d2-1065501651 .color-AA5{color:#F7F8FE;}
+		.d2-1065501651 .color-AB4{color:#EDF0FD;}
+		.d2-1065501651 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="user"><g class="shape" ><rect x="263.000000" y="0.000000" width="77.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="301.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">user</text></g><g id="data"><g class="shape" ><rect x="263.000000" y="187.000000" width="77.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="301.500000" y="225.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">data</text></g><g id="layer"><g class="shape" ><rect x="38.000000" y="1122.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="80.500000" y="1160.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Layer</text></g><g id="feature"><g class="shape" ><rect x="258.000000" y="1122.000000" width="99.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="307.500000" y="1160.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Feature</text></g><g id="computedLayer"><g class="shape" ><rect x="0.000000" y="1288.000000" width="160.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="80.000000" y="1326.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ComputedLayer</text></g><g id="computedFeature"><g class="shape" ><rect x="220.000000" y="1288.000000" width="174.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="307.000000" y="1326.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ComputedFeature</text></g><g id="eval"><g class="shape" ><rect x="137.000000" y="935.000000" width="114.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="194.000000" y="973.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Evaluator</text></g><g id="mantle"><g class="shape" ><rect x="146.000000" y="748.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="193.500000" y="786.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mantle</text></g><g id="layersComponent"><g class="shape" ><rect x="239.000000" y="374.000000" width="126.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="302.000000" y="412.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Map/Layers</text></g><g id="layerComponent"><g class="shape" ><rect x="242.000000" y="561.000000" width="120.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="302.000000" y="599.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Map/Layer</text></g><g id="featureComponent"><g class="shape" ><rect x="301.000000" y="748.000000" width="218.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="410.000000" y="786.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">engines/Cesium/Feature</text></g><g id="(user -&gt; data)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 301.750000 68.000000 C 301.750000 114.400000 301.750000 138.700000 301.750000 183.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1065501651)" /><text x="301.500000" y="132.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">add</text></g><g id="(data -&gt; layersComponent)[0]"><path d="M 301.750000 255.000000 C 301.750000 301.400000 301.750000 325.700000 301.750000 370.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1065501651)" /><text x="301.500000" y="319.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">add</text></g><g id="(layersComponent -&gt; layerComponent)[0]"><path d="M 301.750000 442.000000 C 301.750000 488.400000 301.750000 512.700000 301.750000 557.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1065501651)" /><text x="302.000000" y="506.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">eval each layer</text></g><g id="(layerComponent -&gt; mantle)[0]"><path d="M 262.030550 628.307331 C 207.508824 675.400000 193.500000 699.700000 193.500000 744.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1065501651)" /><text x="207.000000" y="682.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">store layer</text></g><g id="(mantle &lt;-&gt; eval)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 193.500000 818.000000 C 193.500000 862.400000 193.500000 886.700000 193.500000 931.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-1065501651)" /><text x="193.500000" y="880.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">evaluate layer and each features</text></g><g id="(eval -&gt; layer)[0]"><path d="M 151.897512 1002.271653 C 94.688235 1049.400000 80.000000 1073.700000 80.000000 1118.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1065501651)" /><text x="94.500000" y="1055.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">compute</text></g><g id="(eval -&gt; feature)[0]"><path d="M 235.102488 1002.271653 C 292.311765 1049.400000 307.000000 1073.700000 307.000000 1118.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1065501651)" /><text x="292.500000" y="1055.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">compute</text></g><g id="(layer -&gt; computedLayer)[0]"><path d="M 80.000000 1190.000000 C 80.000000 1228.000000 80.000000 1248.000000 80.000000 1284.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1065501651)" /></g><g id="(feature -&gt; computedFeature)[0]"><path d="M 307.000000 1190.000000 C 307.000000 1228.000000 307.000000 1248.000000 307.000000 1284.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1065501651)" /></g><g id="(layerComponent -&gt; featureComponent)[0]"><path d="M 341.469450 628.307331 C 395.991176 675.400000 410.000000 699.700000 410.000000 744.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-1065501651)" /><text x="397.000000" y="682.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">display each feature</text></g><mask id="d2-1065501651" maskUnits="userSpaceOnUse" x="-101" y="-101" width="721" height="1556">
+<rect x="-101" y="-101" width="721" height="1556" fill="white"></rect>
+<rect x="288.000000" y="116.000000" width="27" height="21" fill="black"></rect>
+<rect x="288.000000" y="303.000000" width="27" height="21" fill="black"></rect>
+<rect x="252.000000" y="490.000000" width="100" height="21" fill="black"></rect>
+<rect x="171.000000" y="666.000000" width="72" height="21" fill="black"></rect>
+<rect x="86.000000" y="864.000000" width="215" height="21" fill="black"></rect>
+<rect x="65.000000" y="1039.000000" width="59" height="21" fill="black"></rect>
+<rect x="263.000000" y="1039.000000" width="59" height="21" fill="black"></rect>
+<rect x="330.000000" y="666.000000" width="134" height="21" fill="black"></rect>
+</mask></svg></svg>
diff --git a/web/src/beta/core/docs/mantle.d2 b/web/src/beta/core/docs/mantle.d2
new file mode 100644
index 0000000000..1e916de3a4
--- /dev/null
+++ b/web/src/beta/core/docs/mantle.d2
@@ -0,0 +1,17 @@
+computeFlow: compute flow
+layer: Layer
+computedLayer: ComputedLayer
+computedFeature: ComputedFeature
+
+layer -> mantle: add
+mantle -> computeFlow: compute layer
+computeFlow: {
+  gisData: GIS data
+
+  compute <-> data: check cached data
+  compute <-> gisData: fetch data
+  compute <-> evaluator: evaluate fetched data
+  compute -> data: cache fetched data
+}
+computeFlow -> computedLayer: result
+computeFlow -> computedFeature: result
diff --git a/web/src/beta/core/docs/mantle.svg b/web/src/beta/core/docs/mantle.svg
new file mode 100644
index 0000000000..6c19139688
--- /dev/null
+++ b/web/src/beta/core/docs/mantle.svg
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="utf-8"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" d2Version="0.4.0" preserveAspectRatio="xMinYMin meet" viewBox="0 0 1175 929"><svg id="d2-svg" class="d2-2748587375" width="1175" height="929" viewBox="-101 -101 1175 929"><rect x="-101.000000" y="-101.000000" width="1175.000000" height="929.000000" rx="0.000000" class=" fill-N7" stroke-width="0" /><style type="text/css"><![CDATA[
+.d2-2748587375 .text {
+	font-family: "d2-2748587375-font-regular";
+}
+@font-face {
+	font-family: d2-2748587375-font-regular;
+	src: url("data:application/font-woff;base64,d09GRgABAAAAAAx4AAoAAAAAE3AAAguFAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgXd/Vo2NtYXAAAAFUAAAAkwAAALoDbQNsZ2x5ZgAAAegAAAYsAAAIVH0+7WRoZWFkAAAIFAAAADYAAAA2G4Ue32hoZWEAAAhMAAAAJAAAACQKhAXdaG10eAAACHAAAABsAAAAbDOEBfFsb2NhAAAI3AAAADgAAAA4Gm4com1heHAAAAkUAAAAIAAAACAAMwD2bmFtZQAACTQAAAMjAAAIFAbDVU1wb3N0AAAMWAAAAB0AAAAg/9EAMgADAgkBkAAFAAACigJYAAAASwKKAlgAAAFeADIBIwAAAgsFAwMEAwICBGAAAvcAAAADAAAAAAAAAABBREJPAEAAIP//Au7/BgAAA9gBESAAAZ8AAAAAAeYClAAAACAAA3icdM09asIAGIDhJ036l6Zt+t9m6l0KLYVuPYEIEnARF/EeXkBFvYCTKJ7Fk3xiBjff9RleJFIJCpkRKqVU7tOXH7/+/GvpqPUMDCNo7PtobbWu/sFiF9vYxDpWsYxFzGMW05jEuDmcKnEmlTl34dKVa7kbhVt37pUePHry7MWrN+8+VOwBAAD//wEAAP//Wi0ixAB4nHyUW2wjZxXHz/fZ8cSxs/asPZ6149vMOJ7Yji/x2DNJ7Iw3vmSdjR074w1prmV3w3q7hYoGaVeLKgpsYVdCQJD2oRIrUam8IEAVQqKgvrVCRFCKKlUsRYB4citaCTB5QIWM0YydkCDRp7GsmXN+3//8zgdDsA6As/ghGMAMNjgPFIBAMuQ4w/McIQmSxNEGiUcksY7+oO4jtJgxiqJxqvhB8e7zz6MnvoAfHn169oV2++c7d+6oX++8r6bRW+8DgkzvEI/hR+ADGGLD4WxGFIW0iybCYY41mSinyyWkRYk2mZCifGmp9kIrv+WNe4pReVtIb8rJy4EEf8268uLTt15UpoKil52/rSh3ixNsJp4GAAQbAOgdvA9mnZdiKIHiyA30efXdjz7C+wt/WlB/r7+ncYTxIwj+Pw4NI8tlBdJkQluf+Gpt+cFaedubcBfTxWvZZ5/iLjq+9jjw1ABF8Iue0Pxt5blvUee/X1E/ZGIDFvgh3geDxiKQGy28f/TZAeObeB+G+v8z1EYLBfD+0auXQGeL9g7RX/EjiOtsvKRnks2EwzyfwGdJtcBo2o8pp8mE7JXbsTT3pDBf9U0FdgJzkexOLrfLxf2LCanEpD3b4bmQuGvNTs6Ox3MpdsJ7LjIaLabSjXg8JPqYzGQg4rFM2OPzU5nVNGAtI/Qj1AUPhABoVgtJyuhtCV6HoEiO50wmXotKD+31uZVvfpuMTUQv+4Ls9dn1ZpkwsCsuTubuXk1bF+ebq2Rgmgs6Z1yRz2yqv531Rots4L4tn4yMA4JE7xC9grrg/biZaGqcv3gzP/+0nKq4o1TSN1nhWyV21hVimtb8XlPZy7O06LiQXJ1utX1OyccAYEj2DtG7+AAc2sT7Z9GL81nh+BBS9qTRPzefyV2VonLQ2CoTBm/NfTEfmPHzhfCC9St3G5+T/Z7Wa0fTM95IpaR66WRreu06YJ3/l6gLFyBw5gSU00QwJ2IbmIzWBtHzt+TCrrT9KYTVnw6tLXC5MV+g8StkLMwIK9a5vUZzT37u5qjbXN+iSNHpR+HL9Ybuhx8AFfA7/Z3kslI2M8iJYynd908Wi5VFOmo/P+Ytt9voZXmofnnNTBSsO/WSuq3XUADQY3wATt1BijieJ6nDEaSiGLh6un5JmUyN58bxweu7TPLqtvomipTl8Lj60nGNDj4Aa99jwSEQDo4nKGXF8JvNl3+28Y1NfKD6Ebyh/vEvt77Yd1vpHcLv8AHY+lMgBfJkrN9LRJRzZiNBWIZd1pksvnH00EEiJBuN/V7476gLjN6LFvrTO0NNnDyVMmEI1mLTBVt4eXJpUZlMiGVlMimWUWeBS05NRjLHR1lSXxo8jjNB3UEmgx6nMykTBm75JBS92NlM+g78DXXBBmNnHNAk0BYlmxmsLbLl2oVCO5e/USjcyBfq9YK8vDzwN7+nNPfy5Xbrys2bV1ptra7SE9C/UHfg73/pnCYTx4Z5mnIc1yYol0sjZRqxnWu5J6fZEovv5Bu5SqAQYuRf4x9PeyfuP6vclv2e1e8iU3ujeZ0N9rw0nHixg7pAnspgsIH9ANzViI+2W522QMmNOk8kxJGq0ZiW1YP+997eIbqHuhDV53v67tKvrv+5ufoX19uZHS4SLMdSKUYYY4vR9UZ82TvhFoOJmD81xpXjkYaV90puJh5ws/TIKJON5BpBOuO4EPXSPsoyykgJvjih97/QO0QV/AzQA7+4rCQJ+lKcePbB8ly1NlK5d4+JjvqtdmfSulFFo/LQgwcltRufMhtlwqLXWuodordQR/PhjKvk4Mr4c73aiqXCOVbLha1Zr26jjPq4LPMxtK56ahMpQNpuoF+gDowCCAbB4XJpkUoOwfDaK6tbFtpitNAjWys/QB31w1CV46oh5FQ92jkA8E9QR/f99HenKnCGcFjDIAzfuX+lOnyOMA7bzUvNmpkcNg7biEvLX95dMNvMxmH7SBl11PfYEsuWWOQ+9cuDhrjy+HiFU/+tsfaSOuvY6dlJ0hnsc3jD7rPah53miGizvLF63eK2GC3OkbXmq2Sy8rbJOI+HcvEQek/9R6DKMtUgGj3qpmpx+A8AAAD//wEAAP//9ETAxgABAAAAAguF8vt7CV8PPPUAAwPoAAAAANhdoKEAAAAA3WYvNv46/tsIbwPIAAAAAwACAAAAAAAAAAEAAAPY/u8AAAiY/jr+OghvAAEAAAAAAAAAAAAAAAAAAAAbAo0AWQDIAAACOwA0Ae4AWgJpADQBBwBaAeYAWgIWACoB+AA0AcgALgIrAC8B8AAuASQAHgIgAFIB7wBSAP8AUgM9AFICIwBSAh4ALgIrAFIBWwBSAaMAHAFSABgCIABLAdMADALOABgB0wAMAAAALAAsAFwAcACiAK4AvgECAToBaAGaAc4B8AISAiwCSAJ6ApwCyAL8AxwDXAOCA6QDwAP6BCoAAQAAABsAjAAMAGYABwABAAAAAAAAAAAAAAAAAAQAA3icnJTdThtXFIU/B9ttVDUXFYrIDTqXbZWM3QiiBK5MCYpVhFOP0x+pqjR4xj9iPDPyDFCqPkCv+xZ9i1z1OfoQVa+rs7wNNqoUgRCwzpy991lnr7UPsMm/bFCrPwT+av5guMZ2c8/wAx41nxre4Ljxt+H6SkyDuPGb4SZfNvqGP+J9/Q/DH7NT/9nwQ7bqR4Y/4Xl90/CnG45/DD9ih/cLXIOX/G64xhaF4Qds8pPhDR5jNWt1HtM23OAztg032QYGTKlImZIxxjFiyphz5iSUhCTMmTIiIcbRpUNKpa8ZkZBj/L9fI0Iq5kSqOKHCkRKSElEysYq/KivnrU4caTW3vQ4VEyJOlXFGRIYjZ0xORsKZ6lRUFOzRokXJUHwLKkoCSqakBOTMGdOixxHHDJgwpcRxpEqeWUjOiIpLIp3vLMJ3ZkhCRmmszsmIxdOJX6LsLsc4ehSKXa18vFbhKY7vlO255Yr9ikC/boXZ+rlLNhEX6meqrqTauZSCE+36czt8K1yxh7tXf9aZfLhHsf5XqnzKufSPpVQmJhnObdEhlINC9wTHgdZdQnXke7oMeEOPdwy07tCnT4cTBnR5rdwefRxf0+OEQ2V0hRd7R3LMCT/i+IauYnztxPqzUCzhFwpzdymOc91jRqGee+aB7prohndX2M9QvuaOUjlDzZGPdNIv05xFjM0VhRjO1MulN0rrX2yOmOkuXtubfT8NFzZ7yym+ItcMe7cuOHnlFow+pGpwyzOX+gmIiMk5VcSQnBktKq7E+y0R56Q4DtW9N5qSis51jj/nSi5JmIlBl0x15hT6G5lvQuM+XPO9s7ckVr5nenZ9q/uc4tSrG43eqXvLvdC6nKwo0DJV8xU3DcU1M+8nmqlV/qFyS71uOc/ok0j1VDe4/Q48J6DNDrvsM9E5Q+1c2BvR1jvR5hX76sEZiaJGcnViFXYJeMEuu7zixVrNDocc0GP/DhwXWT0OeH1rZ12nZRVndf4Um7b4Op5dr17eW6/P7+DLLzRRNy9jX9r4bl9YtRv/nxAx81zc1uqd3BOC/wAAAP//AQAA//8HW0wwAHicYmBmAIP/5xiMGLAAAAAAAP//AQAA//8vAQIDAAAA");
+}
+.d2-2748587375 .text-bold {
+	font-family: "d2-2748587375-font-bold";
+}
+@font-face {
+	font-family: d2-2748587375-font-bold;
+	src: url("data:application/font-woff;base64,d09GRgABAAAAAAxsAAoAAAAAE2AAAguFAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgXxHXrmNtYXAAAAFUAAAAkwAAALoDbQNsZ2x5ZgAAAegAAAYcAAAILIpVcjpoZWFkAAAIBAAAADYAAAA2G38e1GhoZWEAAAg8AAAAJAAAACQKfwXaaG10eAAACGAAAABsAAAAbDa5BORsb2NhAAAIzAAAADgAAAA4GeAcEG1heHAAAAkEAAAAIAAAACAAMwD3bmFtZQAACSQAAAMoAAAIKgjwVkFwb3N0AAAMTAAAAB0AAAAg/9EAMgADAioCvAAFAAACigJYAAAASwKKAlgAAAFeADIBKQAAAgsHAwMEAwICBGAAAvcAAAADAAAAAAAAAABBREJPACAAIP//Au7/BgAAA9gBESAAAZ8AAAAAAfAClAAAACAAA3icdM09asIAGIDhJ036l6Zt+t9m6l0KLYVuPYEIEnARF/EeXkBFvYCTKJ7Fk3xiBjff9RleJFIJCpkRKqVU7tOXH7/+/GvpqPUMDCNo7PtobbWu/sFiF9vYxDpWsYxFzGMW05jEuDmcKnEmlTl34dKVa7kbhVt37pUePHry7MWrN+8+VOwBAAD//wEAAP//Wi0ixAB4nGxUW2wbaRn9/j/2TD2ZXMb2eHy/jT1jO7ETZzyepEnqOHHspLXbJG2SZptLqcqySy4NbUpDVdQHKsQl1bI4iAKCRQgESBXSal9gUUAgsbDafWOXfUFiKahC+4AsZKF9cMZoxnbThH3xL1n2Oec753wfGGEGAF/D+9AGJugCM7AAEhNgwpIo8qQiKQrPtSkiYsgZbFZ/8mMxaohGDTH/I9/dtTVUWsX7hxtXSteu/XdteFj9wa/eVB+iW28CIEjUq7gfPwIXgDEoCHIqnZYGbBwpCHyQIFirTRpIKxyBVua+dnH+4VzmeuC8Q+F7p3sWpiIZ+/k5uvitzY3vzErBVc4zsDp+fTvkWL4KCEoA6F94D0y6TjbASizPltD31I+fPMF797597xCgxZ/Dj8D3SfxNepmXJYYg0ObSq/OL31gsvOgvOQZjxavLV6wCvfHv4OeaIlKBVZt3+9r1bYra3lXfCyQaOuBDvAdtmg6JKZXx3uFOU98TvAfGxvcBtlRGGO8dVu41dPH1KqbwI4jpukTFpimRU4IoJvD/ieQ4m421EgSyjt0fuMQvRBJxqWc+MCIMv5wb3I6d84+JQnwodmk4f3qL7k982isEPT6POdTZl+9LX071xlYcLp/b62WC9kuT6eVBwBCrV9F7qAYO4AG4oGaMotORok7OMrzIE4Si2aPn9JvczIMy5qO+sZDct3567cVdyuArnHKELedHfPRi5vzlroBoZz/lCW3dVP8pufmbnGWR6vHYOX3eUL2KDlANnCdzOIqBIwjkmLyRnfp8LlFwT/J+OZPptycsp8ML9OjtuYs7o15uzVPMjpXYrqt+l+YjBrFeRTV8ABbwt+bQgUVZem6ClpH/Wb4xvJaKDjqI8i5lcOaxXTRbeqx8uo/++hdmb59x24s/P5xIOvldq+Mdc+dEYXoSsK7976gG9hMt0jIhA1pymvY2KaWxIF/h5vjExnBhpc+A1Q+ofFJOJ4XV774h9gbT9JmdudmdTGY9Zwmb0lJgyelFp6NyX6MTdgC0g9/WXonhZeVED7SKMy+Mj4dmJnypbleHk3Z5l5bQFzeNLnkhRRMbRmNA8N5Sv6RhZTVz8AFY9f6xZCtURhdJMtky6T43MDtd9vjdETs+eLzk6FlfUd9FgXTEwamvtzC8+ADoRoclRSItvEiy2VcM3//hL3792nYGH6hbf3hX/evvCne139eryIwPoKuRBCMxz4L9U3G4zJiMJGGmw/SVc5g//IAzI7RpJBs8bR5Ug4DOw0mNqY8pJp+9Wa13+aSctQTOJmfOlT3+cL/20YcqY754TySYbI3Rr77efFp+oFrTjybH837sUgZ/6ZkhqJLxxo/7ofcAk6gGXSeumb6bor6+jZohW+ZGLncjk9nK5bYy8UQinojHmx0e3bk4d3v0TmksW9SqrOFm61PYhmpgAS8Ad6TOShB8UBA51qJh80GStdk0nZ5p8YWXRtbS/hGn8YKQXuiJWSO/xD9LOvmv3prfzbgcF15FoXzxy/F3zJ3NHNErqAbmY/42WtWY3FUUWDdl73B0u0etqLI4kDQa7xsM0QH1Q0DA1qvoNVQDUc/16FYJjVv1DEy7VF7MWok/Jz8jjAczvoDXk3B6hyMvzw8t+sadKefQkOAfjb5EC75lh4uzMDYLRYeGopMLov2y1SbaHZ3t/FBiYqWxD0y9irbwDnC627LMy4oi6Yf+6GDA8oVckbl75w7voR0UZ1Hozy68vUk8eHDrj7EwYVgn6AbWSL2KPkYVLf9j3WSaZ+Ivs9Nlr98t2Mq77W2+s/T6Ckqpf5OjTg+aUrsnw72AtD1AdVSBDgCpTeJsNs1KRZHa3vjp/hhloQwmC5V9+CNU+ShcEsVS+CO1u7XXuIIqer+f/99zCLwoCJoMkty/981+giIMZIdJuT9o6iINpIns+8qdx3GygzSQ7WQvqjwNTwnCWf6p/k6Fn6rdb/H5SCTPv6Xz0fUz6BBVtJYe5aUoxyR34l1boMtJmk+FIxT52/1Cu5kynGJMIw8fc4MXfk8YtpEx5HGif7wfzIf5Av++2n5mPgYA/wMAAP//AQAA//+sD7VSAAEAAAACC4XM2G/JXw889QABA+gAAAAA2F2ghAAAAADdZi82/jf+xAhtA/EAAQADAAIAAAAAAAAAAQAAA9j+7wAACJj+N/43CG0AAQAAAAAAAAAAAAAAAAAAABsCsgBQAMgAAAJGAC4CDABNAn4ALgEtAE0CBgBNAiwAIwIPACoB0wAkAj0AJwIGACQBVQAYAjsAQQIkAEEBHgBBA1kAQQI8AEECKwAkAj0AQQGOAEEBuwAVAX8AEQI4ADwCCwAMAwgAGAIJAAwAAAAsACwAWABsAJwAqAC4APgBMAFcAY4BwgHoAgoCIgI+AnACkgK+Au4DDgNKA3ADkgOuA+YEFgABAAAAGwCQAAwAYwAHAAEAAAAAAAAAAAAAAAAABAADeJyclM9uG1UUxn9ObNMKwQJFVbqJ7oJFkejYVEnVNiuH1IpFFAePC0JCSBPP+I8ynhl5Jg7hCVjzFrxFVzwEz4FYo/l87NgF0SaKknx37vnznXO+c4Ed/mabSvUh8Ec9MVxhr35ueIsH9RPD27TrW4arPKn9abhGWJsbrvN5rWf4I95WfzP8gP3qT4YfslttG/6YZ9Udw59sO/4y/Cn7vF3gCrzgV8MVdskMb7HDj4a3eYTFrFR5RNNwjc/YM1xnD+gzoSBmQsIIx5AJI66YEZHjEzFjwpCIEEeHFjGFviYEQo7Rf34N8CmYESjimAJHjE9MQM7YIv4ir5RzZRzqNLO7FgVjAi7kcUlAgiNlREpCxKXiFBRkvKJBg5yB+GYU5HjkTIjxSJkxokGXNqf0GTMhx9FWpJKZT8qQgmsC5XdmUXZmQERCbqyuSAjF04lfJO8Opzi6ZLJdj3y6EeFLHN/Ju+SWyvYrPP26NWabeZdsAubqZ6yuxLq51gTHui3ztvhWuOAV7l792WTy/h6F+l8o8gVXmn+oSSVikuDcLi18Kch3j3Ec6dzBV0e+p0OfE7q8oa9zix49WpzRp8Nr+Xbp4fiaLmccy6MjvLhrSzFn/IDjGzqyKWNH1p/FxCJ+JjN15+I4Ux1TMvW8ZO6p1kgV3n3C5Q6lG+rI5TPQHpWWTvNLtGcBI1NFJoZT9XKpjdz6F5oipqqlnO3tfbkNc9u95RbfkGqHS7UuOJWTWzB631S9dzRzrR+PgJCUC1kMSJnSoOBGvM8JuCLGcazunWhLClornzLPjVQSMRWDDonizMj0NzDd+MZ9sKF7Z29JKP+S6eWqqvtkcerV7YzeqHvLO9+6HK1NoGFTTdfUNBDXxLQfaafW+fvyzfW6pTzliJSY8F8vwDM8muxzwCFjZRjoZm6vQ1MvRJOXHKr6SyJZDaXnyCIc4PGcAw54yfN3+rhk4oyLW3FZz93imCO6HH5QFQv7Lke8Xn37/6y/i2lTtTierk4v7j3FJ3dQ6xfas9v3sqeJlZOYW7TbrTgjYFpycbvrNbnHeP8AAAD//wEAAP//9LdPUXicYmBmAIP/5xiMGLAAAAAAAP//AQAA//8vAQIDAAAA");
+}
+.d2-2748587375 .text-italic {
+	font-family: "d2-2748587375-font-italic";
+}
+@font-face {
+	font-family: d2-2748587375-font-italic;
+	src: url("data:application/font-woff;base64,d09GRgABAAAAAAy8AAoAAAAAFDwAARhRAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAAA9AAAAGAAAABgW1SVeGNtYXAAAAFUAAAAkwAAALoDbQNsZ2x5ZgAAAegAAAZpAAAJAD8R9+poZWFkAAAIVAAAADYAAAA2G7Ur2mhoZWEAAAiMAAAAJAAAACQLeAi/aG10eAAACLAAAABsAAAAbDHRA2Vsb2NhAAAJHAAAADgAAAA4HGQexm1heHAAAAlUAAAAIAAAACAAMwD2bmFtZQAACXQAAAMmAAAIMgntVzNwb3N0AAAMnAAAACAAAAAg/8YAMgADAeEBkAAFAAACigJY//EASwKKAlgARAFeADIBIwAAAgsFAwMEAwkCBCAAAHcAAAADAAAAAAAAAABBREJPAAEAIP//Au7/BgAAA9gBESAAAZMAAAAAAeYClAAAACAAA3icdM09asIAGIDhJ036l6Zt+t9m6l0KLYVuPYEIEnARF/EeXkBFvYCTKJ7Fk3xiBjff9RleJFIJCpkRKqVU7tOXH7/+/GvpqPUMDCNo7PtobbWu/sFiF9vYxDpWsYxFzGMW05jEuDmcKnEmlTl34dKVa7kbhVt37pUePHry7MWrN+8+VOwBAAD//wEAAP//Wi0ixAB4nHxVXWgj5xW93zfjGf9IsqTRjzW2NNbMaEaSRz+ekTSWZUmWJduyLXljb52aeOXdTZOwSdNiGrrZsjWb7EIIpU2dsi8tCy2UQkreEvrQlxZCoaYlhcLSppQ+NNl4S7YhiRChW+pRGcn2yi7NyzDM8N17zrnn3A/6QATAX8e3gYABGAYnuAE0JkgQmq4LXkKTZYGmdZlhaPEm2r/5I7L8xIfhnzxUOHLx5Z+v/PPSm/j24fPopcaNG8bWq08//eUHD4wo+tMDAAAE2XYLx/Ad4AD6eElKpwpYUz1eWpIE3obdLo9HUzO6l6IQv3Ilk3xitza1NpJhMtL0xTmRX86Fy+OC2LCUr63Wb7+4qEcj43L+qWszuUZ6fFTlYp0eAgC24z0Y6OCmg7RGC4RwCz1nNT6IfWb9dAbvle7NGX8+xpPDd4Dv4Pk/cHRB1wiKQsrV3eTWy2u5NZ/O6OHCk/OiUCuKWSb0qvUPWXHb8vq11dsvLpyAmt7OjNh/MWvcC4SOcUEL7wFh4tII4dbqLbx3uHP8D/0A70Ff91+QFm6tXkUuK947fGsOEFjaLWTgOxAF8PKSrHeApVOSLJsiZjInqCnK7fJ4vR6P20VR98s74ax/Q59Zi4Vq0Vz6Qi53idN8C/FQ2j8p1hKp3DOW6emJCbUyJaqeOLukq+tqKhwPRLjkqJTwxMYW9emtFGCQ2y30L9QEl4nU+0gpTdcIQRcoSjZ1OpHt7dmasrytyXkHyRQuF/tJYdMpnRMVtzomltPcpGVrY+FbF7RwMG+w1VBiNp74i8RHlxpqMd/1SajdQm+hJoyd6vaI4ZFL3jv3lFK/nFZmPDFG8icfz2SnxzMenq1bnmlUXthI8L6k113ZKc8tsA7VZY6hywXLeB/cptNPcfliMtNOwi7V947YrIbOspHHL/7qcOosHdzh8mvUBBZCvf3MCdFB6sTxhJYxJ2oyvPf4s7GVC0m9FLD0Gb8ZGC9H/VlvwL/2wzYmnBEhvW157vL8zroSf0wd02zFx0I+h+bmUGhoxDo2yW0AggkA9D18F7ymn4Qi7nUI3QnExEZxqGQfXs2zUefo4KgjGOl3PGn5ygZ6I9u3tnzeOqTTg+rE+YKxac6DA0Dv4X3wdfxJ01qnoNtFEwJjwjbLEtxr9aSdjKwrhXR/oTZDktWxanwe7z/IC4nSFCcav0OKa8S6Eo0bbxzV/Bjvg6XrebMuI8g0zb1Wv4Qfbr7zzdXGDov3DT9Cvzc+/Pgb1wGB0m7Bv/E+OE0l0ymdMYPpdh1J+LUSdb2+i5CDoGg06LEUHT781cPX6QHCiXCOJLve4gDwR6hpZsns2aXiPSJEnWLUS+5ykSal89L0ZF9iM5TPkGShnifJRXdVmTe5LniqE/PoYEmc1MOKVppyBFy9fHuYn+iJmjDSi+GsnGbHyHr8lJqdDv8j5rGv0V9RE4bB3+szt8uGZbXjraPw3D23rSxvq+cuKivb0diallHNh+XK1vwLG/Huc3ZupzK3WN6pzC2YtduftzX0KWp2M0P3ILZhgZfMG4FRC7jbgqY9nsHvFCkitBHvREeVZhjs5H4mltOBZIRfE+Iu7V389iwXOwoOd+XHCEWXGlohH5X+EQqezAl9GzXB3qORl5aOtRki/bWYzz1qZ8Ual0cHDSU/UOkv5ox3AbX/026hXdQE+ey+PLsuzW3ZXZY/nWz4kt5ZKZqPTMWzypISXx6LM1pQmsyMF1LJdUsqLHHhuMDKHFuITJRCYiDsYmNcQHLyM0qsEjIxz7RbaBM/f7K3MrqZPq2TuJ699cvZFImyi0M1sTR63bKbJcZ4GzvksCcsxdgwa0XObN8rrxSMj5zOQGCwT6eHzdpT7Rb6BB2YGTyu/cj9zNHqevPEmVX/ojJfM5dv+EuWOd3BMShj3GV8pmXQpsEuC1pX5xwA+js6ACuAmUKPx6tlzILo5mJNJCmSdIjM9+vGITow7gsrgrgkIp/Bds8uAODfogMInjn76I0QCEmSBYqiiWeFmh0hRA6P2l9acWCMSBtrv1H920Vb56t/+Co6MN7nKzxf4VGg541Fg0JVFKuC8Tmg9jvtBPoAHQALQHdm27mjTyG3YWpw3OZzOkMln/N8TerrJ0hHyPndmvG+L1f9I01nB/KqgO4bnwTrglDjkePws0RdAYD/AgAA//8BAAD//wGb1d8AAAAAAQAAAAEYUWtfvf9fDzz1AAED6AAAAADYXaDMAAAAAN1mLzf+vf7dCB0DyQACAAMAAgAAAAAAAAABAAAD2P7vAAAIQP69/bwIHQPoAML/0QAAAAAAAAAAAAAAGwJ0ACQAyAAAAiYAOQHZACMCTAA5APwAIwHOACMB+gAMAhkAJwGzACUCFwAnAeEAJQEaACsCCwAfAdwAHwD4ACwDHwAfAg0AHwIDACcCF//2AVYAHwGS//wBRQA8AhAAOAHAADsCwwBGAcD/wgAAAC4ALgBgAHYArAC6AMoBCgFCAXABqAHiAgoCNAJOAnACsgLcAwoDRANiA54DzAP4BBYEUASAAAEAAAAbAIwADABmAAcAAQAAAAAAAAAAAAAAAAAEAAN4nJyU204bVxSGPwfbbXq6qFBEbtC+TKVkTKMQJeHKlKCMinDqcXqQqkqDPT6I8czIM5iSJ+h136Jvkas+Rp+i6nW1fy+DHUVBIAT8e/Y6/Gutf21gk//YoFa/C/zdnBuusd382fAdvmgeGd5gv/mZ4ToPG/8YbjBovDXc5EGja/gT3tX/NPwpT+q/Gb7LVv3Q8Oc8rm8a/nLD8a/hr3jCuwWuwTP+MFxji8LwHTb51fAG97CYtTr32DHc4Gu2DTfZBnpMqEiZkDHCMWTCiDNmJJREJMyYMCRhgCOkTUqlrxmxkGP0wa8xERUzYkUcU+FIiUiJKRlbxLfyynmtjEOdZnbXpmJMzIk8TonJcOSMyMlIOFWcioqCF7RoUdIX34KKkoCSCSkBOTNGtOhwyBE9xkwocRwqkmcWkTOk4pxY+Z1Z+M70ScgojdUZGQPxdOKXyDvkCEeHQrarkY/WIjzE8aO8Pbdctt8S6NetMFvPu2QTM1c/U3Ul1c25JjjWrc/b5gfhihe4W/Vnncn1PRrof6XIJ5xp/gNNKhOTDOe2aBNJQZG7j2Nf55BIHfmJkB6v6PCGns5tunRpc0yPkJfy7dDF8R0djjmQRyi8uDuUYo75Bcf3hLLxsRPrz2JiCb9TmLpLcZypjimFeu6ZB6o1UYU3n7DfoXxNHaV8+tojb+k0v0x7FjMyVRRiOFUvl9oorX8DU8RUtfjZXt37bZjb7i23+IJcO+zVuuDkJ7dgdN1Ug/c0c66fgJgBOSey6JMzpUXFhXi/JuaMFMeBuvdKW1LRvvTxeS6kkoSpGIRkijOj0N/YdBMZ9/6a7p29JQP5e6anl1XdJotTr65m9EbdW95F1uVkZQItm2q+oqa+uGam/UQ7tco/km+p1y3nEaHiLnb7Q6/ADs/ZZY+xsvR1M7+886+Et9hTB05JZDWUpn0NjwnYJeApu+zynKfv9XLJxhkft8ZnNX+bA/bpsHdtNQvbDvu8XIv28cx/ie2O6nE8ujw9u/U0H9xAtd9o367eza4m56cxt2hX23FMzNRzcVurNbn7BP8DAAD//wEAAP//cqFRQAAAAAMAAP/1AAD/zgAyAAAAAAAAAAAAAAAAAAAAAAAAAAA=");
+}]]></style><style type="text/css"><![CDATA[.shape {
+  shape-rendering: geometricPrecision;
+  stroke-linejoin: round;
+}
+.connection {
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+.blend {
+  mix-blend-mode: multiply;
+  opacity: 0.5;
+}
+
+		.d2-2748587375 .fill-N1{fill:#0A0F25;}
+		.d2-2748587375 .fill-N2{fill:#676C7E;}
+		.d2-2748587375 .fill-N3{fill:#9499AB;}
+		.d2-2748587375 .fill-N4{fill:#CFD2DD;}
+		.d2-2748587375 .fill-N5{fill:#DEE1EB;}
+		.d2-2748587375 .fill-N6{fill:#EEF1F8;}
+		.d2-2748587375 .fill-N7{fill:#FFFFFF;}
+		.d2-2748587375 .fill-B1{fill:#0D32B2;}
+		.d2-2748587375 .fill-B2{fill:#0D32B2;}
+		.d2-2748587375 .fill-B3{fill:#E3E9FD;}
+		.d2-2748587375 .fill-B4{fill:#E3E9FD;}
+		.d2-2748587375 .fill-B5{fill:#EDF0FD;}
+		.d2-2748587375 .fill-B6{fill:#F7F8FE;}
+		.d2-2748587375 .fill-AA2{fill:#4A6FF3;}
+		.d2-2748587375 .fill-AA4{fill:#EDF0FD;}
+		.d2-2748587375 .fill-AA5{fill:#F7F8FE;}
+		.d2-2748587375 .fill-AB4{fill:#EDF0FD;}
+		.d2-2748587375 .fill-AB5{fill:#F7F8FE;}
+		.d2-2748587375 .stroke-N1{stroke:#0A0F25;}
+		.d2-2748587375 .stroke-N2{stroke:#676C7E;}
+		.d2-2748587375 .stroke-N3{stroke:#9499AB;}
+		.d2-2748587375 .stroke-N4{stroke:#CFD2DD;}
+		.d2-2748587375 .stroke-N5{stroke:#DEE1EB;}
+		.d2-2748587375 .stroke-N6{stroke:#EEF1F8;}
+		.d2-2748587375 .stroke-N7{stroke:#FFFFFF;}
+		.d2-2748587375 .stroke-B1{stroke:#0D32B2;}
+		.d2-2748587375 .stroke-B2{stroke:#0D32B2;}
+		.d2-2748587375 .stroke-B3{stroke:#E3E9FD;}
+		.d2-2748587375 .stroke-B4{stroke:#E3E9FD;}
+		.d2-2748587375 .stroke-B5{stroke:#EDF0FD;}
+		.d2-2748587375 .stroke-B6{stroke:#F7F8FE;}
+		.d2-2748587375 .stroke-AA2{stroke:#4A6FF3;}
+		.d2-2748587375 .stroke-AA4{stroke:#EDF0FD;}
+		.d2-2748587375 .stroke-AA5{stroke:#F7F8FE;}
+		.d2-2748587375 .stroke-AB4{stroke:#EDF0FD;}
+		.d2-2748587375 .stroke-AB5{stroke:#F7F8FE;}
+		.d2-2748587375 .background-color-N1{background-color:#0A0F25;}
+		.d2-2748587375 .background-color-N2{background-color:#676C7E;}
+		.d2-2748587375 .background-color-N3{background-color:#9499AB;}
+		.d2-2748587375 .background-color-N4{background-color:#CFD2DD;}
+		.d2-2748587375 .background-color-N5{background-color:#DEE1EB;}
+		.d2-2748587375 .background-color-N6{background-color:#EEF1F8;}
+		.d2-2748587375 .background-color-N7{background-color:#FFFFFF;}
+		.d2-2748587375 .background-color-B1{background-color:#0D32B2;}
+		.d2-2748587375 .background-color-B2{background-color:#0D32B2;}
+		.d2-2748587375 .background-color-B3{background-color:#E3E9FD;}
+		.d2-2748587375 .background-color-B4{background-color:#E3E9FD;}
+		.d2-2748587375 .background-color-B5{background-color:#EDF0FD;}
+		.d2-2748587375 .background-color-B6{background-color:#F7F8FE;}
+		.d2-2748587375 .background-color-AA2{background-color:#4A6FF3;}
+		.d2-2748587375 .background-color-AA4{background-color:#EDF0FD;}
+		.d2-2748587375 .background-color-AA5{background-color:#F7F8FE;}
+		.d2-2748587375 .background-color-AB4{background-color:#EDF0FD;}
+		.d2-2748587375 .background-color-AB5{background-color:#F7F8FE;}
+		.d2-2748587375 .color-N1{color:#0A0F25;}
+		.d2-2748587375 .color-N2{color:#676C7E;}
+		.d2-2748587375 .color-N3{color:#9499AB;}
+		.d2-2748587375 .color-N4{color:#CFD2DD;}
+		.d2-2748587375 .color-N5{color:#DEE1EB;}
+		.d2-2748587375 .color-N6{color:#EEF1F8;}
+		.d2-2748587375 .color-N7{color:#FFFFFF;}
+		.d2-2748587375 .color-B1{color:#0D32B2;}
+		.d2-2748587375 .color-B2{color:#0D32B2;}
+		.d2-2748587375 .color-B3{color:#E3E9FD;}
+		.d2-2748587375 .color-B4{color:#E3E9FD;}
+		.d2-2748587375 .color-B5{color:#EDF0FD;}
+		.d2-2748587375 .color-B6{color:#F7F8FE;}
+		.d2-2748587375 .color-AA2{color:#4A6FF3;}
+		.d2-2748587375 .color-AA4{color:#EDF0FD;}
+		.d2-2748587375 .color-AA5{color:#F7F8FE;}
+		.d2-2748587375 .color-AB4{color:#EDF0FD;}
+		.d2-2748587375 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}]]></style><g id="computeFlow"><g class="shape" ><rect x="135.000000" y="228.000000" width="809.000000" height="312.000000" class=" stroke-B1 fill-B4" style="stroke-width:2;" /></g><text x="539.500000" y="215.000000" class="text fill-N1" style="text-anchor:middle;font-size:28px">compute flow</text></g><g id="layer"><g class="shape" ><rect x="5.000000" y="0.000000" width="85.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="47.500000" y="38.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">Layer</text></g><g id="computedLayer"><g class="shape" ><rect x="400.000000" y="661.000000" width="160.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="480.000000" y="699.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ComputedLayer</text></g><g id="computedFeature"><g class="shape" ><rect x="799.000000" y="661.000000" width="174.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="886.000000" y="699.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">ComputedFeature</text></g><g id="mantle"><g class="shape" ><rect x="0.000000" y="237.000000" width="95.000000" height="66.000000" class=" stroke-B1 fill-B6" style="stroke-width:2;" /></g><text x="47.500000" y="275.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">mantle</text></g><g id="computeFlow.gisData"><g class="shape" ><rect x="214.000000" y="444.000000" width="104.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="266.000000" y="482.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">GIS data</text></g><g id="computeFlow.compute"><g class="shape" ><rect x="471.000000" y="257.000000" width="108.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="525.000000" y="295.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">compute</text></g><g id="computeFlow.data"><g class="shape" ><rect x="486.000000" y="444.000000" width="77.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="524.500000" y="482.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">data</text></g><g id="computeFlow.evaluator"><g class="shape" ><rect x="715.000000" y="444.000000" width="115.000000" height="66.000000" class=" stroke-B1 fill-B5" style="stroke-width:2;" /></g><text x="772.500000" y="482.500000" class="text-bold fill-N1" style="text-anchor:middle;font-size:16px">evaluator</text></g><g id="(layer -&gt; mantle)[0]"><marker id="mk-3488378134" markerWidth="10.000000" markerHeight="12.000000" refX="7.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="0.000000,0.000000 10.000000,6.000000 0.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 47.500000 68.000000 C 47.500000 114.400000 47.500000 197.000000 47.500000 233.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2748587375)" /><text x="47.500000" y="157.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">add</text></g><g id="(mantle -&gt; computeFlow)[0]"><path d="M 96.072016 298.203351 L 132.855967 356.138074" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2748587375)" /><text x="115.000000" y="334.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">compute layer</text></g><g id="computeFlow.(compute &lt;-&gt; data)[0]"><marker id="mk-2451250203" markerWidth="10.000000" markerHeight="12.000000" refX="3.000000" refY="6.000000" viewBox="0.000000 0.000000 10.000000 12.000000" orient="auto" markerUnits="userSpaceOnUse"> <polygon points="10.000000,0.000000 0.000000,6.000000 10.000000,12.000000" class="connection fill-B1" stroke-width="2" /> </marker><path d="M 493.078620 326.503332 C 453.144118 371.900000 453.100000 396.200000 492.876511 441.980513" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2748587375)" /><text x="453.500000" y="390.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">check cached data</text></g><g id="computeFlow.(compute &lt;-&gt; gisData)[0]"><path d="M 467.102396 316.444890 C 347.750000 370.160650 310.400000 396.200000 285.903274 441.481826" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2748587375)" /><text x="363.000000" y="369.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">fetch data</text></g><g id="computeFlow.(compute &lt;-&gt; evaluator)[0]"><path d="M 582.492360 312.291768 C 733.750000 369.375883 772.500000 396.200000 772.500000 441.000000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-start="url(#mk-2451250203)" marker-end="url(#mk-3488378134)" mask="url(#d2-2748587375)" /><text x="701.500000" y="363.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">evaluate fetched data</text></g><g id="computeFlow.(compute -&gt; data)[0]"><path d="M 555.100396 325.001666 C 596.355882 371.900000 596.400000 396.200000 556.623489 441.980513" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2748587375)" /><text x="596.000000" y="390.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">cache fetched data</text></g><g id="(computeFlow -&gt; computedLayer)[0]"><path d="M 479.750000 542.000000 C 479.750000 588.400000 479.750000 612.700000 479.750000 657.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2748587375)" /><text x="479.500000" y="606.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">result</text></g><g id="(computeFlow -&gt; computedFeature)[0]"><path d="M 886.000000 542.000000 C 886.000000 588.400000 886.000000 612.700000 886.000000 657.500000" fill="none" class="connection stroke-B1" style="stroke-width:2;" marker-end="url(#mk-3488378134)" mask="url(#d2-2748587375)" /><text x="886.500000" y="606.000000" class="text-italic fill-N2" style="text-anchor:middle;font-size:16px">result</text></g><mask id="d2-2748587375" maskUnits="userSpaceOnUse" x="-101" y="-101" width="1175" height="929">
+<rect x="-101" y="-101" width="1175" height="929" fill="white"></rect>
+<rect x="34.000000" y="141.000000" width="27" height="21" fill="black"></rect>
+<rect x="67.000000" y="318.000000" width="96" height="21" fill="black"></rect>
+<rect x="392.000000" y="374.000000" width="123" height="21" fill="black"></rect>
+<rect x="329.000000" y="353.000000" width="68" height="21" fill="black"></rect>
+<rect x="629.000000" y="347.000000" width="145" height="21" fill="black"></rect>
+<rect x="533.000000" y="374.000000" width="126" height="21" fill="black"></rect>
+<rect x="460.000000" y="590.000000" width="39" height="21" fill="black"></rect>
+<rect x="867.000000" y="590.000000" width="39" height="21" fill="black"></rect>
+</mask></svg></svg>
diff --git a/web/src/beta/core/engines/Cesium/Cluster.tsx b/web/src/beta/core/engines/Cesium/Cluster.tsx
new file mode 100644
index 0000000000..8d46c83ec8
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Cluster.tsx
@@ -0,0 +1,91 @@
+import { Cartesian3, Color, EntityCluster, HorizontalOrigin, VerticalOrigin } from "cesium";
+import React, { useEffect, useMemo } from "react";
+import { CustomDataSource } from "resium";
+
+import { toCSSFont } from "@reearth/beta/utils/value";
+
+import { ClusterComponentProps } from "..";
+
+const Cluster: React.FC<ClusterComponentProps> = ({ property, children }) => {
+  const {
+    clusterPixelRange = 15,
+    clusterMinSize = 3,
+    clusterLabelTypography = {
+      fontFamily: "sans-serif",
+      fontSize: 30,
+      fontWeight: 400,
+      color: "#FFF",
+      textAlign: "center",
+      bold: false,
+      italic: false,
+      underline: false,
+    },
+    clusterImage,
+    clusterImageWidth,
+    clusterImageHeight,
+  } = property?.default ?? {};
+
+  const cluster = useMemo(() => {
+    return new EntityCluster({
+      enabled: true,
+      pixelRange: 15,
+      minimumClusterSize: 2,
+      clusterBillboards: true,
+      clusterLabels: true,
+      clusterPoints: true,
+    });
+  }, []);
+
+  useEffect(() => {
+    const isClusterHidden = React.Children.count(children) < clusterMinSize;
+    const removeListener = cluster?.clusterEvent.addEventListener(
+      (_clusteredEntities, clusterParam) => {
+        clusterParam.label.font = toCSSFont(clusterLabelTypography, { fontSize: 30 });
+        clusterParam.label.horizontalOrigin =
+          clusterLabelTypography.textAlign === "right"
+            ? HorizontalOrigin.LEFT
+            : clusterLabelTypography.textAlign === "left"
+            ? HorizontalOrigin.RIGHT
+            : HorizontalOrigin.CENTER;
+        clusterParam.label.verticalOrigin = VerticalOrigin.CENTER;
+        clusterParam.label.fillColor = Color.fromCssColorString(
+          clusterLabelTypography.color ?? "#FFF",
+        );
+        clusterParam.label.eyeOffset = new Cartesian3(0, 0, -5);
+        clusterParam.billboard.show = true;
+        // Billboard.{image,height,width} should accept undefined
+        (clusterParam.billboard.image as any) = clusterImage;
+        (clusterParam.billboard.height as any) = clusterImageHeight;
+        (clusterParam.billboard.width as any) = clusterImageWidth;
+        // Workaround if minimumClusterSize is larger than number of layers event listner breaks
+        cluster.minimumClusterSize = isClusterHidden
+          ? React.Children.count(children)
+          : clusterMinSize;
+      },
+    );
+    cluster.enabled = !isClusterHidden;
+    // Workaround to re-style components
+    cluster.pixelRange = 0;
+    cluster.pixelRange = clusterPixelRange;
+    return () => {
+      removeListener();
+    };
+  }, [
+    clusterMinSize,
+    clusterPixelRange,
+    clusterLabelTypography,
+    clusterImage,
+    clusterImageHeight,
+    clusterImageWidth,
+    children,
+    cluster,
+  ]);
+
+  return cluster ? (
+    <CustomDataSource show clustering={cluster}>
+      {children}
+    </CustomDataSource>
+  ) : null;
+};
+
+export default Cluster;
diff --git a/web/src/beta/core/engines/Cesium/Event.tsx b/web/src/beta/core/engines/Cesium/Event.tsx
new file mode 100644
index 0000000000..eaaccc6f05
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Event.tsx
@@ -0,0 +1,15 @@
+import { useEffect } from "react";
+
+export type Props = {
+  onMount?: () => void;
+  onUnmount?: () => void;
+};
+
+export default function Event({ onMount, onUnmount }: Props) {
+  useEffect(() => {
+    onMount?.();
+    return () => onUnmount?.();
+  }, [onMount, onUnmount]);
+
+  return null;
+}
diff --git a/web/src/beta/core/engines/Cesium/Feature/Box/Edge.tsx b/web/src/beta/core/engines/Cesium/Feature/Box/Edge.tsx
new file mode 100644
index 0000000000..7cf17570c3
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Box/Edge.tsx
@@ -0,0 +1,89 @@
+import {
+  ArcType,
+  Cartesian3,
+  Color,
+  TimeIntervalCollection,
+  TranslationRotationScale,
+  DistanceDisplayCondition,
+} from "cesium";
+import { FC, memo } from "react";
+import { PolylineGraphics } from "resium";
+
+import type { EventCallback } from "@reearth/beta/core/Map";
+
+import { EntityExt } from "../utils";
+
+import { useHooks } from "./hooks/edge";
+
+export type EdgeEventCallback = EventCallback<
+  [
+    event: any,
+    edgeEvent: {
+      layerId: string;
+      index: number;
+    },
+  ]
+>;
+
+export type EdgeProperties = { start: Cartesian3; end: Cartesian3; isDraggable?: boolean };
+
+type Props = {
+  layerId: string;
+  featureId?: string;
+  index: number;
+  edge: EdgeProperties;
+  trs: TranslationRotationScale;
+  isHovered: boolean;
+  fillColor?: Color;
+  hoverColor?: Color;
+  width?: number;
+  availability?: TimeIntervalCollection;
+  distanceDisplayCondition?: DistanceDisplayCondition;
+  onMouseDown?: EdgeEventCallback;
+  onMouseMove?: EdgeEventCallback;
+  onMouseUp?: EdgeEventCallback;
+  onMouseEnter?: EdgeEventCallback;
+  onMouseLeave?: EdgeEventCallback;
+};
+
+export const Edge: FC<Props> = memo(function EdgePresenter({
+  layerId,
+  featureId,
+  index,
+  edge,
+  isHovered,
+  fillColor,
+  trs,
+  width,
+  hoverColor,
+  availability,
+  distanceDisplayCondition,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+}) {
+  const { cbp, outlineColor } = useHooks({
+    id: layerId,
+    index,
+    edge,
+    isHovered,
+    fillColor,
+    trs,
+    hoverColor,
+    onMouseDown,
+    onMouseMove,
+    onMouseUp,
+  });
+
+  return (
+    <EntityExt layerId={layerId} featureId={featureId} availability={availability}>
+      <PolylineGraphics
+        positions={cbp}
+        width={width}
+        material={outlineColor}
+        arcType={ArcType.NONE}
+        distanceDisplayCondition={distanceDisplayCondition}
+      />
+    </EntityExt>
+  );
+});
diff --git a/web/src/beta/core/engines/Cesium/Feature/Box/ScalePoints.tsx b/web/src/beta/core/engines/Cesium/Feature/Box/ScalePoints.tsx
new file mode 100644
index 0000000000..4fdb0071c0
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Box/ScalePoints.tsx
@@ -0,0 +1,154 @@
+import {
+  ArcType,
+  Cartesian3,
+  Color,
+  TimeIntervalCollection,
+  TranslationRotationScale,
+  DistanceDisplayCondition,
+} from "cesium";
+import { FC, memo } from "react";
+import { BoxGraphics, PolylineGraphics } from "resium";
+
+import type { EventCallback } from "@reearth/beta/core/Map";
+
+import { EntityExt } from "../utils";
+
+import { useHooks } from "./hooks/scalePoint";
+
+export type ScalePointProperties = {
+  point: Cartesian3;
+  oppositePoint: Cartesian3;
+};
+
+export type PointEventCallback = EventCallback<
+  [
+    event: any,
+    pointEvent: {
+      index: number;
+      layerId: string;
+      opposite: boolean;
+      position?: Cartesian3;
+      oppositePosition?: Cartesian3;
+      pointLocal?: Cartesian3;
+    },
+  ]
+>;
+
+type Props = {
+  layerId: string;
+  featureId?: string;
+  index: number;
+  scalePoint: ScalePointProperties;
+  trs: TranslationRotationScale;
+  isHovered: boolean;
+  pointFillColor?: Color;
+  pointOutlineColor?: Color;
+  hoverPointOutlineColor?: Color;
+  pointOutlineWidth?: number;
+  axisLineColor?: Color;
+  axisLineWidth?: number;
+  dimensions?: { width: number; height: number; length: number };
+  visiblePoint?: boolean;
+  visibleAxisLine?: boolean;
+  availability?: TimeIntervalCollection;
+  distanceDisplayCondition?: DistanceDisplayCondition;
+  onPointMouseDown?: PointEventCallback;
+  onPointMouseMove?: PointEventCallback;
+  onPointMouseUp?: PointEventCallback;
+};
+
+export const ScalePoints: FC<Props> = memo(function ScalePointsPresenter({
+  layerId,
+  featureId,
+  index,
+  scalePoint,
+  isHovered,
+  pointFillColor,
+  pointOutlineColor,
+  hoverPointOutlineColor,
+  pointOutlineWidth,
+  axisLineColor,
+  axisLineWidth,
+  trs,
+  dimensions,
+  visiblePoint,
+  visibleAxisLine,
+  availability,
+  distanceDisplayCondition,
+  onPointMouseDown,
+  onPointMouseMove,
+  onPointMouseUp,
+}) {
+  const {
+    entitiesPosition,
+    pointOutlineColorCb,
+    cesiumDimensionsCallbackProperty,
+    orientation,
+    axisColorProperty,
+  } = useHooks({
+    id: layerId,
+    index,
+    scalePoint,
+    isHovered,
+    pointOutlineColor,
+    hoverPointOutlineColor,
+    axisLineColor,
+    trs,
+    dimensions,
+    onPointMouseDown,
+    onPointMouseMove,
+    onPointMouseUp,
+  });
+
+  return (
+    <>
+      <EntityExt
+        layerId={`${layerId}-${index}`}
+        featureId={`${featureId}-${index}`}
+        position={entitiesPosition.point}
+        orientation={orientation}
+        availability={availability}>
+        <BoxGraphics
+          show={visiblePoint}
+          dimensions={cesiumDimensionsCallbackProperty}
+          material={pointFillColor}
+          fill={!!pointFillColor}
+          outline={!!pointOutlineColor}
+          outlineColor={pointOutlineColorCb}
+          outlineWidth={pointOutlineWidth}
+          distanceDisplayCondition={distanceDisplayCondition}
+        />
+      </EntityExt>
+      <EntityExt
+        layerId={`${layerId}-opposite-${index}`}
+        featureId={`${featureId}-opposite-${index}`}
+        position={entitiesPosition.oppositePoint}
+        orientation={orientation}
+        availability={availability}>
+        <BoxGraphics
+          show={visiblePoint}
+          dimensions={cesiumDimensionsCallbackProperty}
+          material={pointFillColor}
+          fill={!!pointFillColor}
+          outline={!!pointOutlineColor}
+          outlineColor={pointOutlineColorCb}
+          outlineWidth={pointOutlineWidth}
+          distanceDisplayCondition={distanceDisplayCondition}
+        />
+      </EntityExt>
+      <EntityExt
+        layerId={`${layerId}-axis-line-${index}`}
+        featureId={`${featureId}-axis-line-${index}`}
+        availability={availability}>
+        <PolylineGraphics
+          positions={entitiesPosition.axisLine}
+          show={visibleAxisLine}
+          material={axisColorProperty}
+          width={axisLineWidth}
+          arcType={ArcType.NONE}
+          distanceDisplayCondition={distanceDisplayCondition}
+        />
+      </EntityExt>
+    </>
+  );
+});
diff --git a/web/src/beta/core/engines/Cesium/Feature/Box/Side.tsx b/web/src/beta/core/engines/Cesium/Feature/Box/Side.tsx
new file mode 100644
index 0000000000..2d61ed213c
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Box/Side.tsx
@@ -0,0 +1,67 @@
+import {
+  Color,
+  DistanceDisplayCondition,
+  Plane as CesiumPlane,
+  TimeIntervalCollection,
+  TranslationRotationScale,
+} from "cesium";
+import { FC, memo } from "react";
+import { PlaneGraphics } from "resium";
+
+import { EntityExt } from "../utils";
+
+import { useHooks } from "./hooks/side";
+
+export const Side: FC<{
+  layerId: string;
+  featureId?: string;
+  planeLocal: CesiumPlane;
+  isActive: boolean;
+  trs: TranslationRotationScale;
+  fillColor?: Color;
+  outlineColor?: Color;
+  activeOutlineColor?: Color;
+  fill?: boolean;
+  availability?: TimeIntervalCollection;
+  distanceDisplayCondition?: DistanceDisplayCondition;
+}> = memo(function SidePresenter({
+  layerId,
+  featureId,
+  planeLocal,
+  isActive,
+  fill,
+  fillColor,
+  outlineColor,
+  activeOutlineColor,
+  trs,
+  availability,
+  distanceDisplayCondition,
+}) {
+  const { cbRef, plane, dimension, orientation, outlineColorCb } = useHooks({
+    planeLocal,
+    isActive,
+    outlineColor,
+    activeOutlineColor,
+    trs,
+  });
+
+  return (
+    <EntityExt
+      layerId={layerId}
+      featureId={featureId}
+      position={cbRef}
+      orientation={orientation}
+      availability={availability}>
+      <PlaneGraphics
+        plane={plane}
+        dimensions={dimension}
+        fill={fill}
+        material={fillColor}
+        outlineWidth={1}
+        outlineColor={outlineColorCb}
+        distanceDisplayCondition={distanceDisplayCondition}
+        outline
+      />
+    </EntityExt>
+  );
+});
diff --git a/web/src/beta/core/engines/Cesium/Feature/Box/constants.ts b/web/src/beta/core/engines/Cesium/Feature/Box/constants.ts
new file mode 100644
index 0000000000..b06f94fa97
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Box/constants.ts
@@ -0,0 +1,63 @@
+// The 6 box sides defined as planes in local coordinate space.
+
+import { Cartesian3, Plane as CesiumPlane } from "cesium";
+
+import type { EdgeProperties } from "./Edge";
+
+// ref: https://github.com/TerriaJS/terriajs/blob/cad62a45cbee98c7561625458bec3a48510f6cbc/lib/Models/BoxDrawing.ts#L161-L169
+export const SIDE_PLANES: readonly CesiumPlane[] = [
+  new CesiumPlane(new Cartesian3(0, 0, 1), 0.5),
+  new CesiumPlane(new Cartesian3(0, 0, -1), 0.5),
+  new CesiumPlane(new Cartesian3(0, 1, 0), 0.5),
+  new CesiumPlane(new Cartesian3(0, -1, 0), 0.5),
+  new CesiumPlane(new Cartesian3(1, 0, 0), 0.5),
+  new CesiumPlane(new Cartesian3(-1, 0, 0), 0.5),
+];
+
+const CORNER_POINT_VECTORS = [
+  new Cartesian3(0.5, 0.5, 0.5),
+  new Cartesian3(0.5, -0.5, 0.5),
+  new Cartesian3(-0.5, -0.5, 0.5),
+  new Cartesian3(-0.5, 0.5, 0.5),
+];
+
+const FACE_POINT_VECTORS = [
+  new Cartesian3(0.5, 0.0, 0.0),
+  new Cartesian3(0.0, 0.5, 0.0),
+  new Cartesian3(0.0, 0.0, 0.5),
+];
+
+// The box has 8 corner points and 6 face points that act as scaling grips.
+// Here we represent them as 7 vectors in local coordinates space.
+// Each vector represents a point and its opposite points can be easily derived from it.
+// @see https://github.com/TerriaJS/terriajs/blob/cad62a45cbee98c7561625458bec3a48510f6cbc/lib/Models/BoxDrawing.ts#L184-L187
+const SCALE_POINT_VECTORS = [...CORNER_POINT_VECTORS, ...FACE_POINT_VECTORS];
+
+export const SCALE_POINTS = SCALE_POINT_VECTORS.map(vector => {
+  return {
+    point: vector,
+    oppositePoint: Cartesian3.multiplyByScalar(vector, -1, new Cartesian3()),
+  };
+});
+
+// Calculate edge of box. The box has 12 edge.
+// In this logic, calculate 3 edges(vertical edge, top edge, bottom edge) in each `CORNER_POINT_VECTORS`.
+export const BOX_EDGES: EdgeProperties[] = CORNER_POINT_VECTORS.flatMap((vector, i) => {
+  const upPoint = vector;
+  const downPoint = Cartesian3.clone(upPoint, new Cartesian3());
+  // Set point to bottom
+  downPoint.z *= -1;
+
+  const nextUpPoint = CORNER_POINT_VECTORS[(i + 1) % 4];
+  const nextDownPoint = Cartesian3.clone(nextUpPoint, new Cartesian3());
+  nextDownPoint.z *= -1;
+
+  const verticalEdge: EdgeProperties = { start: upPoint, end: downPoint, isDraggable: true };
+  const topEdge: EdgeProperties = { start: nextUpPoint, end: upPoint };
+  const bottomEdge: EdgeProperties = { start: nextDownPoint, end: downPoint };
+  return [verticalEdge, topEdge, bottomEdge];
+});
+
+// This is used for plane ID.
+// We can use this name, for example you want to move the box when front plane is dragged.
+export const SIDE_PLANE_NAMES = ["bottom", "top", "front", "back", "left", "right"];
diff --git a/web/src/beta/core/engines/Cesium/Feature/Box/hooks/box.ts b/web/src/beta/core/engines/Cesium/Feature/Box/hooks/box.ts
new file mode 100644
index 0000000000..3e5711b299
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Box/hooks/box.ts
@@ -0,0 +1,372 @@
+import {
+  Cartesian3,
+  HeadingPitchRoll,
+  Quaternion,
+  Math as CesiumMath,
+  TranslationRotationScale,
+  Cartesian2,
+  Cartographic,
+} from "cesium";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCesium } from "resium";
+
+import { LayerEditEvent } from "@reearth/beta/core/Map";
+
+import type { Property } from "..";
+import { sampleTerrainHeightFromCartesian, updateMapController } from "../../../common";
+import { useContext } from "../../context";
+import {
+  type FeatureProps,
+  toColor,
+  toTimeInterval,
+  toDistanceDisplayCondition,
+} from "../../utils";
+import type { EdgeEventCallback } from "../Edge";
+import type { PointEventCallback } from "../ScalePoints";
+import { computeMouseMoveAmount, updateTrs } from "../utils";
+
+export const useHooks = ({
+  property,
+  geometry,
+  feature,
+  onLayerEdit,
+}: Pick<FeatureProps<Property>, "property" | "geometry" | "feature"> & {
+  onLayerEdit?: (e: LayerEditEvent) => void;
+}) => {
+  const { viewer } = useCesium();
+  const ctx = useContext();
+  const {
+    fillColor,
+    outlineColor,
+    activeOutlineColor,
+    outlineWidth,
+    draggableOutlineColor,
+    activeDraggableOutlineColor,
+    draggableOutlineWidth,
+    pointFillColor,
+    pointOutlineColor,
+    activePointOutlineColor,
+    axisLineColor,
+    cursor,
+    allowEnterGround,
+  } = property ?? {};
+
+  const [terrainHeightEstimate, setTerrainHeightEstimate] = useState(0);
+  const [trs] = useState(() =>
+    updateTrs(
+      new TranslationRotationScale(),
+      property,
+      terrainHeightEstimate,
+      geometry,
+      allowEnterGround,
+    ),
+  );
+
+  const inProgressSamplingTerrainHeight = useRef(false);
+  const updateTerrainHeight = useCallback(() => {
+    if (inProgressSamplingTerrainHeight.current) {
+      return;
+    }
+
+    if (!allowEnterGround && viewer) {
+      inProgressSamplingTerrainHeight.current = true;
+      sampleTerrainHeightFromCartesian(viewer.scene, trs.translation).then(v => {
+        setTerrainHeightEstimate(v ?? 0);
+        inProgressSamplingTerrainHeight.current = false;
+      });
+    }
+  }, [allowEnterGround, viewer, trs]);
+
+  useEffect(() => {
+    updateTrs(trs, property, terrainHeightEstimate, geometry, allowEnterGround);
+    updateTerrainHeight();
+  }, [
+    property,
+    geometry,
+    trs,
+    viewer,
+    terrainHeightEstimate,
+    updateTerrainHeight,
+    allowEnterGround,
+  ]);
+
+  const style = useMemo(
+    () => ({
+      fillColor: toColor(fillColor),
+      outlineColor: toColor(outlineColor),
+      activeOutlineColor: toColor(activeOutlineColor),
+      draggableOutlineColor: toColor(draggableOutlineColor),
+      activeDraggableOutlineColor: toColor(activeDraggableOutlineColor),
+      outlineWidth,
+      draggableOutlineWidth,
+      fill: !!fillColor,
+      outline: !!outlineColor,
+    }),
+    [
+      fillColor,
+      outlineColor,
+      activeOutlineColor,
+      outlineWidth,
+      draggableOutlineWidth,
+      draggableOutlineColor,
+      activeDraggableOutlineColor,
+    ],
+  );
+
+  const scalePointStyle = useMemo(
+    () => ({
+      pointFillColor: toColor(pointFillColor) ?? style.fillColor,
+      pointOutlineColor: toColor(pointOutlineColor) ?? style.outlineColor,
+      activePointOutlineColor: toColor(activePointOutlineColor) ?? style.outlineColor,
+      axisLineColor: toColor(axisLineColor) ?? style.outlineColor,
+    }),
+    [pointFillColor, pointOutlineColor, axisLineColor, style, activePointOutlineColor],
+  );
+
+  // ScalePoint event handlers
+  const currentPointIndex = useRef<number>();
+  const handlePointMouseDown: PointEventCallback = useCallback(
+    (_, { index }) => {
+      if (!viewer) {
+        return;
+      }
+      updateMapController(viewer, false);
+      currentPointIndex.current = index;
+    },
+    [viewer],
+  );
+  const prevMousePosition2dForPoint = useRef<Cartesian2>();
+  const handlePointMouseMove: PointEventCallback = useCallback(
+    (e, { position, oppositePosition, pointLocal, index, layerId }) => {
+      if (
+        currentPointIndex.current !== index ||
+        !position ||
+        !oppositePosition ||
+        !pointLocal ||
+        !viewer
+      ) {
+        return;
+      }
+
+      const mousePosition = e.startPosition;
+      if (prevMousePosition2dForPoint.current === undefined) {
+        prevMousePosition2dForPoint.current = new Cartesian2(mousePosition.x, mousePosition.y);
+        return;
+      }
+
+      const currentMousePosition2d = new Cartesian2(mousePosition.x, mousePosition.y);
+
+      const axisVector = Cartesian3.subtract(position, oppositePosition, new Cartesian3());
+      const length = Cartesian3.magnitude(axisVector);
+      const scaleDirection = Cartesian3.normalize(axisVector, new Cartesian3());
+
+      const { scaleAmount, pixelLengthAfterScaling } = computeMouseMoveAmount(
+        viewer.scene,
+        {
+          startPosition: prevMousePosition2dForPoint.current,
+          endPosition: currentMousePosition2d,
+        },
+        position,
+        scaleDirection,
+        length,
+      );
+
+      prevMousePosition2dForPoint.current = currentMousePosition2d.clone();
+
+      const axisLocal = Cartesian3.normalize(pointLocal, new Cartesian3());
+      const xDot = Math.abs(Cartesian3.dot(new Cartesian3(1, 0, 0), axisLocal));
+      const yDot = Math.abs(Cartesian3.dot(new Cartesian3(0, 1, 0), axisLocal));
+      const zDot = Math.abs(Cartesian3.dot(new Cartesian3(0, 0, 1), axisLocal));
+
+      const isProportionalScaling = xDot && yDot && zDot;
+
+      // When downscaling, stop at 20px length.
+      if (scaleAmount < 0) {
+        const isDiagonal = axisLocal.x && axisLocal.y && axisLocal.y;
+        const pixelSideLengthAfterScaling = isDiagonal
+          ? pixelLengthAfterScaling / Math.sqrt(2)
+          : pixelLengthAfterScaling;
+        if (pixelSideLengthAfterScaling < 20) {
+          // Do nothing if scaling down will make the box smaller than 20px
+          return;
+        }
+      }
+
+      // Compute scale components along xyz
+      const scaleStep = Cartesian3.multiplyByScalar(
+        // Taking abs because scaling step is independent of axis direction
+        // Scaling step is negative when scaling down and positive when scaling up
+        Cartesian3.abs(
+          // Extract scale components along the axis
+          Cartesian3.multiplyComponents(
+            trs.scale,
+            // For proportional scaling we scale equally along xyz
+            isProportionalScaling ? new Cartesian3(1, 1, 1) : axisLocal,
+            new Cartesian3(),
+          ),
+          new Cartesian3(),
+        ),
+        scaleAmount,
+        new Cartesian3(),
+      );
+
+      // Move the box by half the scale amount in the direction of scaling so
+      // that the opposite end remains stationary.
+      const moveStep = Cartesian3.multiplyByScalar(axisVector, scaleAmount / 2, new Cartesian3());
+
+      // Prevent scaling in Z axis if it will result in the box going underground.
+      const isDraggingBottomScalePoint = axisLocal.z < 0;
+      const isUpscaling = scaleAmount > 0;
+      if (!allowEnterGround && isUpscaling && isDraggingBottomScalePoint) {
+        const boxCenterHeight = Cartographic.fromCartesian(
+          trs.translation,
+          undefined,
+          new Cartographic(),
+        ).height;
+        const bottomHeight = boxCenterHeight - trs.scale.z / 2;
+        const bottomHeightAfterScaling = bottomHeight - Math.abs(moveStep.z);
+        if (bottomHeightAfterScaling < 0) {
+          scaleStep.z = 0;
+        }
+      }
+
+      const nextScale = new Cartesian3();
+      const nextTranslation = new Cartesian3();
+
+      Cartesian3.add(trs.scale, scaleStep, nextScale);
+      Cartesian3.add(trs.translation, moveStep, nextTranslation);
+
+      const cartographic = viewer?.scene.globe.ellipsoid.cartesianToCartographic(
+        nextTranslation,
+      ) as Cartographic;
+
+      onLayerEdit?.({
+        layerId,
+        scale: {
+          width: nextScale.x,
+          length: nextScale.y,
+          height: nextScale.z,
+          location: {
+            lat: CesiumMath.toDegrees(cartographic?.latitude),
+            lng: CesiumMath.toDegrees(cartographic?.longitude),
+            height: cartographic?.height,
+          },
+        },
+      });
+      ctx?.onLayerEdit?.({
+        layerId,
+        scale: {
+          width: nextScale.x,
+          length: nextScale.y,
+          height: nextScale.z,
+          location: {
+            lat: CesiumMath.toDegrees(cartographic?.latitude),
+            lng: CesiumMath.toDegrees(cartographic?.longitude),
+            height: cartographic?.height,
+          },
+        },
+      });
+    },
+    [trs, viewer, allowEnterGround, ctx, onLayerEdit],
+  );
+  const handlePointMouseUp: PointEventCallback = useCallback(() => {
+    if (!viewer) {
+      return;
+    }
+    currentPointIndex.current = undefined;
+    prevMousePosition2dForPoint.current = undefined;
+    updateMapController(viewer, true);
+  }, [viewer]);
+
+  // Edge event handlers
+  const currentEdgeIndex = useRef<number>();
+  const handleEdgeMouseDown: EdgeEventCallback = useCallback(
+    (_, { index }) => {
+      if (!viewer) {
+        return;
+      }
+      currentEdgeIndex.current = index;
+      updateMapController(viewer, false);
+    },
+    [viewer],
+  );
+  const prevMouseXAxisForEdge = useRef<number>();
+  const handleEdgeMouseMove: EdgeEventCallback = useCallback(
+    (e, { index, layerId }) => {
+      if (currentEdgeIndex.current !== index) {
+        return;
+      }
+
+      const mousePosition = e.startPosition;
+      if (prevMouseXAxisForEdge.current === undefined) {
+        prevMouseXAxisForEdge.current = mousePosition.x;
+        return;
+      }
+
+      const dx = mousePosition.x - prevMouseXAxisForEdge.current;
+      prevMouseXAxisForEdge.current = mousePosition.x;
+      const sensitivity = 0.05;
+      const hpr = new HeadingPitchRoll(0, 0, 0);
+      // -dx because the screen coordinates is opposite to local coordinates space.
+      hpr.heading = -dx * sensitivity;
+      hpr.pitch = 0;
+      hpr.roll = 0;
+
+      const nextRotation = new Quaternion();
+
+      Quaternion.multiply(trs.rotation, Quaternion.fromHeadingPitchRoll(hpr), nextRotation);
+
+      const { heading, pitch, roll } = HeadingPitchRoll.fromQuaternion(nextRotation);
+
+      onLayerEdit?.({
+        layerId,
+        rotate: {
+          heading,
+          pitch,
+          roll,
+        },
+      });
+      ctx?.onLayerEdit?.({
+        layerId,
+        rotate: {
+          heading,
+          pitch,
+          roll,
+        },
+      });
+    },
+    [trs, ctx, onLayerEdit],
+  );
+  const handleEdgeMouseUp: EdgeEventCallback = useCallback(() => {
+    if (!viewer) {
+      return;
+    }
+    currentEdgeIndex.current = undefined;
+    prevMouseXAxisForEdge.current = undefined;
+    updateMapController(viewer, true);
+  }, [viewer]);
+
+  useEffect(() => {
+    document.body.style.cursor = cursor || "default";
+  }, [cursor]);
+
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  return {
+    style,
+    trs,
+    scalePointStyle,
+    availability,
+    distanceDisplayCondition,
+    handlePointMouseDown,
+    handlePointMouseMove,
+    handlePointMouseUp,
+    handleEdgeMouseDown,
+    handleEdgeMouseMove,
+    handleEdgeMouseUp,
+  };
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Box/hooks/edge.ts b/web/src/beta/core/engines/Cesium/Feature/Box/hooks/edge.ts
new file mode 100644
index 0000000000..a4cc45ae42
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Box/hooks/edge.ts
@@ -0,0 +1,113 @@
+import {
+  CallbackProperty,
+  Cartesian3,
+  Color,
+  ColorMaterialProperty,
+  Matrix4,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEventType,
+  TranslationRotationScale,
+} from "cesium";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCesium } from "resium";
+
+import type { EventCallback } from "@reearth/beta/core/Map";
+
+import { getTag } from "../../utils";
+import type { EdgeEventCallback, EdgeProperties } from "../Edge";
+
+export const useHooks = ({
+  id,
+  index,
+  edge,
+  isHovered,
+  fillColor,
+  trs,
+  hoverColor,
+  onMouseDown,
+  onMouseMove,
+  onMouseUp,
+}: {
+  id: string;
+  index: number;
+  edge: EdgeProperties;
+  trs: TranslationRotationScale;
+  isHovered: boolean;
+  fillColor?: Color;
+  hoverColor?: Color;
+  width?: number;
+  onMouseDown?: EdgeEventCallback;
+  onMouseMove?: EdgeEventCallback;
+  onMouseUp?: EdgeEventCallback;
+  onMouseEnter?: EdgeEventCallback;
+  onMouseLeave?: EdgeEventCallback;
+}) => {
+  const { viewer } = useCesium();
+  const [cbp] = useState(
+    () =>
+      new CallbackProperty(() => {
+        const position1 = new Cartesian3();
+        const position2 = new Cartesian3();
+        const matrix = Matrix4.fromTranslationRotationScale(trs);
+        Matrix4.multiplyByPoint(matrix, edge.start, position1);
+        Matrix4.multiplyByPoint(matrix, edge.end, position2);
+        return [position1, position2];
+      }, false),
+  );
+
+  const isEdgeHovered = useRef(false);
+  const [outlineColor] = useState(
+    () =>
+      new ColorMaterialProperty(
+        new CallbackProperty(
+          () => (isEdgeHovered.current ? hoverColor ?? fillColor : fillColor),
+          false,
+        ),
+      ),
+  );
+  useEffect(() => {
+    isEdgeHovered.current = isHovered;
+  }, [isHovered]);
+
+  const handleMouseDown: EventCallback = useCallback(
+    e => {
+      if (!viewer) {
+        return;
+      }
+      const currentLayerId = getTag(viewer.scene.pick(e.position)?.id)?.layerId;
+      if (currentLayerId !== id) {
+        return;
+      }
+      onMouseDown?.(e, { layerId: id, index });
+    },
+    [onMouseDown, id, index, viewer],
+  );
+
+  const handleMouseMove: EventCallback = useCallback(
+    e => {
+      onMouseMove?.(e, { layerId: id, index });
+    },
+    [onMouseMove, index, id],
+  );
+
+  const handleMouseUp: EventCallback = useCallback(
+    e => {
+      onMouseUp?.(e, { layerId: id, index });
+    },
+    [onMouseUp, index, id],
+  );
+
+  const eventHandler = useMemo(() => new ScreenSpaceEventHandler(viewer?.scene.canvas), [viewer]);
+  useEffect(() => {
+    eventHandler.setInputAction(handleMouseDown, ScreenSpaceEventType.LEFT_DOWN);
+    eventHandler.setInputAction(handleMouseMove, ScreenSpaceEventType.MOUSE_MOVE);
+    eventHandler.setInputAction(handleMouseUp, ScreenSpaceEventType.LEFT_UP);
+  }, [eventHandler, handleMouseDown, handleMouseMove, handleMouseUp]);
+
+  useEffect(() => () => eventHandler.destroy(), [eventHandler]);
+
+  return {
+    cbp,
+    outlineColor,
+  };
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Box/hooks/scalePoint.ts b/web/src/beta/core/engines/Cesium/Feature/Box/hooks/scalePoint.ts
new file mode 100644
index 0000000000..d9de166d6c
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Box/hooks/scalePoint.ts
@@ -0,0 +1,175 @@
+import {
+  CallbackProperty,
+  Cartesian3,
+  Color,
+  JulianDate,
+  Matrix4,
+  PolylineDashMaterialProperty,
+  PositionProperty,
+  Quaternion,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEventType,
+  TranslationRotationScale,
+} from "cesium";
+import { useCallback, useMemo, useState, useEffect, useRef } from "react";
+import { useCesium } from "resium";
+
+import type { EventCallback } from "@reearth/beta/core/Map";
+
+import { getTag } from "../../utils";
+import type { PointEventCallback, ScalePointProperties } from "../ScalePoints";
+
+export const useHooks = ({
+  id,
+  index,
+  scalePoint,
+  isHovered,
+  pointOutlineColor,
+  hoverPointOutlineColor,
+  axisLineColor,
+  trs,
+  dimensions,
+  onPointMouseDown,
+  onPointMouseMove,
+  onPointMouseUp,
+}: {
+  id: string;
+  index: number;
+  scalePoint: ScalePointProperties;
+  trs: TranslationRotationScale;
+  isHovered: boolean;
+  pointOutlineColor?: Color;
+  hoverPointOutlineColor?: Color;
+  axisLineColor?: Color;
+  dimensions?: { width: number; height: number; length: number };
+  onPointMouseDown?: PointEventCallback;
+  onPointMouseMove?: PointEventCallback;
+  onPointMouseUp?: PointEventCallback;
+}) => {
+  const layerId = `${id}-${index}`;
+  const oppositeLayerId = `${id}-opposite-${index}`;
+
+  const { viewer } = useCesium();
+
+  const [entitiesPosition] = useState(() => {
+    const point = new Cartesian3();
+    const oppositePoint = new Cartesian3();
+
+    const pointProperty = new CallbackProperty(() => {
+      const matrix = Matrix4.fromTranslationRotationScale(trs);
+      Matrix4.multiplyByPoint(matrix, scalePoint.point, point);
+      return point;
+    }, false) as unknown as PositionProperty;
+    const oppositePointProperty = new CallbackProperty(() => {
+      const matrix = Matrix4.fromTranslationRotationScale(trs);
+      Matrix4.multiplyByPoint(matrix, scalePoint.oppositePoint, oppositePoint);
+      return oppositePoint;
+    }, false) as unknown as PositionProperty;
+
+    return {
+      point: pointProperty,
+      oppositePoint: oppositePointProperty,
+      axisLine: new CallbackProperty(
+        () => [
+          pointProperty.getValue(JulianDate.now()),
+          oppositePointProperty.getValue(JulianDate.now()),
+        ],
+        false,
+      ),
+    };
+  });
+
+  const isScalePointHovered = useRef(false);
+  const [pointOutlineColorCb] = useState(
+    () =>
+      new CallbackProperty(
+        () => (isScalePointHovered.current ? hoverPointOutlineColor : pointOutlineColor),
+        false,
+      ),
+  );
+  useEffect(() => {
+    isScalePointHovered.current = isHovered;
+  }, [isHovered]);
+
+  const [cesiumDimensions] = useState(
+    () => new Cartesian3(dimensions?.width, dimensions?.length, dimensions?.height),
+  );
+  const [cesiumDimensionsCallbackProperty] = useState(
+    () => new CallbackProperty(() => cesiumDimensions, false),
+  );
+  const [orientation] = useState(() => new CallbackProperty(() => Quaternion.IDENTITY, false));
+  const axisColorProperty = useMemo(
+    () => new PolylineDashMaterialProperty({ color: axisLineColor, dashLength: 8 }),
+    [axisLineColor],
+  );
+
+  const isOppositePointClicked = useRef(false);
+  const handlePointMouseDown: EventCallback = useCallback(
+    e => {
+      if (!viewer) {
+        return;
+      }
+      const currentLayerId = getTag(viewer.scene.pick(e.position)?.id)?.layerId;
+      isOppositePointClicked.current = currentLayerId === oppositeLayerId;
+      if (currentLayerId === layerId || currentLayerId === oppositeLayerId) {
+        onPointMouseDown?.(e, {
+          layerId: isOppositePointClicked.current ? oppositeLayerId : layerId,
+          index,
+          opposite: isOppositePointClicked.current,
+        });
+      }
+    },
+    [onPointMouseDown, index, layerId, oppositeLayerId, viewer],
+  );
+  const handlePointMouseMove: EventCallback = useCallback(
+    e => {
+      onPointMouseMove?.(e, {
+        layerId: isOppositePointClicked.current ? oppositeLayerId : layerId,
+        index,
+        opposite: isOppositePointClicked.current,
+        position: isOppositePointClicked.current
+          ? entitiesPosition.oppositePoint.getValue(JulianDate.now())
+          : entitiesPosition.point.getValue(JulianDate.now()),
+        oppositePosition: isOppositePointClicked.current
+          ? entitiesPosition.point.getValue(JulianDate.now())
+          : entitiesPosition.oppositePoint.getValue(JulianDate.now()),
+        pointLocal: isOppositePointClicked ? scalePoint.oppositePoint : scalePoint.point,
+      });
+    },
+    [onPointMouseMove, index, entitiesPosition, scalePoint, layerId, oppositeLayerId],
+  );
+  const handlePointMouseUp: EventCallback = useCallback(
+    e => {
+      onPointMouseUp?.(e, {
+        layerId: isOppositePointClicked.current ? oppositeLayerId : layerId,
+        index,
+        opposite: isOppositePointClicked.current,
+      });
+    },
+    [onPointMouseUp, index, layerId, oppositeLayerId],
+  );
+
+  useEffect(() => {
+    Cartesian3.clone(
+      new Cartesian3(dimensions?.width, dimensions?.length, dimensions?.height),
+      cesiumDimensions,
+    );
+  }, [dimensions, cesiumDimensions]);
+
+  const eventHandler = useMemo(() => new ScreenSpaceEventHandler(viewer?.scene.canvas), [viewer]);
+  useEffect(() => {
+    eventHandler.setInputAction(handlePointMouseDown, ScreenSpaceEventType.LEFT_DOWN);
+    eventHandler.setInputAction(handlePointMouseMove, ScreenSpaceEventType.MOUSE_MOVE);
+    eventHandler.setInputAction(handlePointMouseUp, ScreenSpaceEventType.LEFT_UP);
+  }, [eventHandler, handlePointMouseDown, handlePointMouseMove, handlePointMouseUp]);
+
+  useEffect(() => () => eventHandler.destroy(), [eventHandler]);
+
+  return {
+    entitiesPosition,
+    pointOutlineColorCb,
+    cesiumDimensionsCallbackProperty,
+    orientation,
+    axisColorProperty,
+  };
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Box/hooks/side.ts b/web/src/beta/core/engines/Cesium/Feature/Box/hooks/side.ts
new file mode 100644
index 0000000000..a6cb3819f1
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Box/hooks/side.ts
@@ -0,0 +1,72 @@
+import {
+  Axis,
+  CallbackProperty,
+  Cartesian3,
+  Color,
+  Matrix4,
+  Plane as CesiumPlane,
+  PositionProperty,
+  TranslationRotationScale,
+} from "cesium";
+import { useMemo, useRef, useState, useEffect } from "react";
+
+import { setPlaneDimensions } from "../utils";
+
+export const useHooks = ({
+  planeLocal,
+  isActive,
+  outlineColor,
+  activeOutlineColor,
+  trs,
+}: {
+  planeLocal: CesiumPlane;
+  isActive: boolean;
+  trs: TranslationRotationScale;
+  outlineColor?: Color;
+  activeOutlineColor?: Color;
+}) => {
+  const cbRef = useMemo(
+    () => new CallbackProperty(() => trs.translation, false) as unknown as PositionProperty,
+    [trs],
+  );
+  const [plane, dimension, orientation] = useMemo(() => {
+    return [
+      new CallbackProperty(() => {
+        const scratchScaleMatrix = new Matrix4();
+        const scaleMatrix = Matrix4.fromScale(trs.scale, scratchScaleMatrix);
+        return CesiumPlane.transform(
+          planeLocal,
+          scaleMatrix,
+          new CesiumPlane(Cartesian3.UNIT_Z, 0),
+        );
+      }, false),
+      new CallbackProperty(() => {
+        const normalAxis = planeLocal.normal.x ? Axis.X : planeLocal.normal.y ? Axis.Y : Axis.Z;
+        const dimension = new Cartesian3();
+        setPlaneDimensions(trs.scale, normalAxis, dimension);
+        return dimension;
+      }, false),
+      new CallbackProperty(() => trs.rotation, false),
+    ];
+  }, [trs, planeLocal]);
+
+  const isActiveRef = useRef(false);
+  const [outlineColorCb] = useState(
+    () =>
+      new CallbackProperty(
+        () => (isActiveRef.current ? activeOutlineColor ?? outlineColor : outlineColor),
+        false,
+      ),
+  );
+  useEffect(() => {
+    isActiveRef.current = isActive;
+  }, [isActive]);
+
+  return {
+    cbRef,
+    plane,
+    dimension,
+    orientation,
+    outlineColorCb,
+  };
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Box/index.tsx b/web/src/beta/core/engines/Cesium/Feature/Box/index.tsx
new file mode 100644
index 0000000000..cb9d06bead
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Box/index.tsx
@@ -0,0 +1,140 @@
+import React, { memo } from "react";
+
+import type {
+  FeatureComponentConfig,
+  FeatureProps,
+} from "@reearth/beta/core/engines/Cesium/Feature";
+import type { BoxAppearance, LatLngHeight } from "@reearth/beta/core/mantle";
+import { LayerEditEvent } from "@reearth/beta/core/Map";
+
+import { BOX_EDGES, SCALE_POINTS, SIDE_PLANES, SIDE_PLANE_NAMES } from "./constants";
+import { Edge } from "./Edge";
+import { useHooks } from "./hooks/box";
+import { ScalePoints } from "./ScalePoints";
+import { Side } from "./Side";
+
+export type Props = FeatureProps<Property> & { onLayerEdit?: (e: LayerEditEvent) => void };
+
+export type Property = BoxAppearance & {
+  // compat
+  location?: LatLngHeight;
+};
+
+const Box: React.FC<Props> = memo(function BoxPresenter({
+  property,
+  geometry,
+  isVisible,
+  layer,
+  feature,
+  onLayerEdit,
+}) {
+  const {
+    show = true,
+    height = 100,
+    width = 100,
+    length = 100,
+    pointOutlineWidth,
+    axisLineWidth,
+    scalePoint = true,
+    axisLine = true,
+    activeBox,
+    activeEdgeIndex,
+    activeScalePointIndex,
+  } = property ?? {};
+  const {
+    style,
+    trs,
+    scalePointStyle,
+    availability,
+    distanceDisplayCondition,
+    handlePointMouseDown,
+    handlePointMouseMove,
+    handlePointMouseUp,
+    handleEdgeMouseDown,
+    handleEdgeMouseMove,
+    handleEdgeMouseUp,
+  } = useHooks({ property, geometry, feature, onLayerEdit });
+
+  const scalePointDimension = ((width + height + length) / 3) * 0.05;
+  const [layerId, featureId] = [layer?.id, feature?.id];
+
+  return !isVisible || !show ? null : (
+    <>
+      {SIDE_PLANES.map((plane, i) => (
+        <Side
+          key={`${layerId}-plane-${SIDE_PLANE_NAMES[i]}`}
+          layerId={`${layerId}-plane-${SIDE_PLANE_NAMES[i]}`}
+          featureId={`${featureId}-plane-${SIDE_PLANE_NAMES[i]}`}
+          planeLocal={plane}
+          fill={style.fill}
+          fillColor={style.fillColor}
+          outlineColor={style.outlineColor}
+          isActive={!!activeBox}
+          activeOutlineColor={style.activeOutlineColor}
+          trs={trs}
+          availability={availability}
+          distanceDisplayCondition={distanceDisplayCondition}
+        />
+      ))}
+      {BOX_EDGES.map((edge, i) => {
+        return (
+          <Edge
+            key={`${layerId}-edge-${i}`}
+            featureId={`${featureId}-edge${edge.isDraggable ? `-draggable` : ""}-${i}`}
+            layerId={`${layerId}-edge${edge.isDraggable ? `-draggable` : ""}-${i}`}
+            index={i}
+            edge={edge}
+            isHovered={activeEdgeIndex === i || (!edge.isDraggable && !!activeBox)}
+            width={edge.isDraggable ? style.draggableOutlineWidth : style.outlineWidth}
+            fillColor={edge.isDraggable ? style.draggableOutlineColor : style.outlineColor}
+            hoverColor={
+              edge.isDraggable ? style.activeDraggableOutlineColor : style.activeOutlineColor
+            }
+            trs={trs}
+            onMouseDown={edge.isDraggable ? handleEdgeMouseDown : undefined}
+            onMouseMove={edge.isDraggable ? handleEdgeMouseMove : undefined}
+            onMouseUp={edge.isDraggable ? handleEdgeMouseUp : undefined}
+            availability={availability}
+            distanceDisplayCondition={distanceDisplayCondition}
+          />
+        );
+      })}
+      {scalePoint &&
+        SCALE_POINTS.map((vector, i) => (
+          <ScalePoints
+            key={`${layerId}-scale-point-${i}`}
+            layerId={`${layerId}-scale-point`}
+            featureId={`${featureId}-scale-point`}
+            index={i}
+            scalePoint={vector}
+            trs={trs}
+            isHovered={activeScalePointIndex === i}
+            pointFillColor={scalePointStyle.pointFillColor}
+            pointOutlineColor={scalePointStyle.pointOutlineColor}
+            hoverPointOutlineColor={scalePointStyle.activePointOutlineColor}
+            pointOutlineWidth={pointOutlineWidth}
+            axisLineColor={scalePointStyle.axisLineColor}
+            axisLineWidth={axisLineWidth}
+            dimensions={{
+              width: scalePointDimension,
+              height: scalePointDimension,
+              length: scalePointDimension,
+            }}
+            visiblePoint={scalePoint}
+            visibleAxisLine={axisLine && activeScalePointIndex === i}
+            onPointMouseDown={handlePointMouseDown}
+            onPointMouseMove={handlePointMouseMove}
+            onPointMouseUp={handlePointMouseUp}
+            availability={availability}
+            distanceDisplayCondition={distanceDisplayCondition}
+          />
+        ))}
+    </>
+  );
+});
+
+export default Box;
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Box/utils.ts b/web/src/beta/core/engines/Cesium/Feature/Box/utils.ts
new file mode 100644
index 0000000000..9964c81c5e
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Box/utils.ts
@@ -0,0 +1,169 @@
+import {
+  Axis,
+  Cartesian2,
+  Cartesian3,
+  HeadingPitchRoll,
+  Matrix3,
+  Matrix4,
+  Quaternion,
+  Ray,
+  Scene,
+  Transforms,
+  TranslationRotationScale,
+} from "cesium";
+
+import type { Geometry } from "@reearth/beta/core/mantle";
+
+import { translationWithClamping } from "../../utils";
+
+import type { Property } from ".";
+
+export const updateTrs = (
+  trs: TranslationRotationScale,
+  property: Property | undefined,
+  terrainHeightEstimation: number,
+  geometry?: Geometry,
+  allowEnterGround?: boolean,
+) => {
+  const { height, width, length, heading, pitch, roll } = property ?? {};
+
+  const coordinates =
+    geometry?.type === "Point"
+      ? geometry.coordinates
+      : property?.location
+      ? [property.location.lng, property.location.lat, property.location.height ?? 0]
+      : undefined;
+
+  const translation = coordinates
+    ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+    : undefined;
+  if (translation) {
+    Cartesian3.clone(translation, trs.translation);
+  }
+  if (!allowEnterGround) {
+    translationWithClamping(trs, !!allowEnterGround, terrainHeightEstimation);
+  }
+
+  const rotation =
+    heading && pitch && roll
+      ? Matrix3.fromHeadingPitchRoll(new HeadingPitchRoll(heading, pitch, roll))
+      : Matrix3.getRotation(
+          Matrix4.getMatrix3(Transforms.eastNorthUpToFixedFrame(trs.translation), new Matrix3()),
+          new Matrix3(),
+        );
+  Quaternion.clone(Quaternion.fromRotationMatrix(rotation), trs.rotation);
+
+  Cartesian3.clone(new Cartesian3(width || 100, length || 100, height || 100), trs.scale);
+
+  return trs;
+};
+
+function screenProjectVector(
+  scene: Scene,
+  position: Cartesian3,
+  direction: Cartesian3,
+  length: number,
+  result: Cartesian2,
+): Cartesian2 {
+  const ray = new Ray();
+  ray.origin = position;
+  ray.direction = direction;
+  const nearPoint2d = scene.cartesianToCanvasCoordinates(Ray.getPoint(ray, 0), new Cartesian2());
+
+  const farPoint2d = scene.cartesianToCanvasCoordinates(
+    Ray.getPoint(ray, length),
+    new Cartesian2(),
+  );
+  const screenVector2d = Cartesian2.subtract(farPoint2d, nearPoint2d, result);
+  return screenVector2d;
+}
+
+const dotMousePosition = (
+  scene: Scene,
+  mouseMove: {
+    startPosition: Cartesian2;
+    endPosition: Cartesian2;
+  },
+  position: Cartesian3,
+  direction: Cartesian3,
+) => {
+  const mouseVector2d = Cartesian2.subtract(
+    mouseMove.endPosition,
+    mouseMove.startPosition,
+    new Cartesian2(),
+  );
+
+  // Project the vector of unit length to the screen
+  const screenVector2d = screenProjectVector(scene, position, direction, 1, new Cartesian2());
+  const screenNormal2d = Cartesian2.normalize(screenVector2d, new Cartesian2());
+
+  const pixelsPerStep = Cartesian2.magnitude(screenVector2d);
+  const moveAmountPixels = Cartesian2.dot(mouseVector2d, screenNormal2d);
+
+  return {
+    pixelsPerStep,
+    moveAmount: moveAmountPixels / pixelsPerStep,
+  };
+};
+
+export const computeMoveAmount = (
+  scene: Scene,
+  mouseMove: {
+    startPosition: Cartesian2;
+    endPosition: Cartesian2;
+  },
+  position: Cartesian3,
+  direction: Cartesian3,
+) => {
+  const mouseVector2d = Cartesian2.subtract(
+    mouseMove.endPosition,
+    mouseMove.startPosition,
+    new Cartesian2(),
+  );
+
+  // Project the vector of unit length to the screen
+  const screenVector2d = screenProjectVector(scene, position, direction, 1, new Cartesian2());
+  const screenNormal2d = Cartesian2.normalize(screenVector2d, new Cartesian2());
+
+  const pixelsPerStep = Cartesian2.magnitude(screenVector2d);
+  const moveAmountPixels = Cartesian2.dot(mouseVector2d, screenNormal2d);
+
+  return {
+    pixelsPerStep,
+    moveAmount: moveAmountPixels / pixelsPerStep,
+  };
+};
+
+export const computeMouseMoveAmount = (
+  scene: Scene,
+  mouseMove: {
+    startPosition: Cartesian2;
+    endPosition: Cartesian2;
+  },
+  position: Cartesian3,
+  direction: Cartesian3,
+  length: number,
+) => {
+  const { moveAmount, pixelsPerStep } = dotMousePosition(scene, mouseMove, position, direction);
+  const scaleAmount = moveAmount / length;
+  const pixelLengthAfterScaling = pixelsPerStep * length + pixelsPerStep * length * scaleAmount;
+  return { pixelLengthAfterScaling, scaleAmount };
+};
+
+// ref: https://github.com/TerriaJS/terriajs/blob/cad62a45cbee98c7561625458bec3a48510f6cbc/lib/Models/BoxDrawing.ts#L1446-L1461
+export function setPlaneDimensions(
+  boxDimensions: Cartesian3,
+  planeNormalAxis: Axis,
+  planeDimensions: Cartesian2,
+) {
+  if (planeNormalAxis === Axis.X) {
+    planeDimensions.x = boxDimensions.y;
+    planeDimensions.y = boxDimensions.z;
+  } else if (planeNormalAxis === Axis.Y) {
+    planeDimensions.x = boxDimensions.x;
+    planeDimensions.y = boxDimensions.z;
+  } else if (planeNormalAxis === Axis.Z) {
+    planeDimensions.x = boxDimensions.x;
+    planeDimensions.y = boxDimensions.y;
+  }
+}
diff --git a/web/src/beta/core/engines/Cesium/Feature/Ellipsoid/index.tsx b/web/src/beta/core/engines/Cesium/Feature/Ellipsoid/index.tsx
new file mode 100644
index 0000000000..e051ac5e31
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Ellipsoid/index.tsx
@@ -0,0 +1,85 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { Cartesian3 } from "cesium";
+import { useMemo } from "react";
+import { EllipsoidGraphics } from "resium";
+
+import { LatLng, toColor } from "@reearth/beta/utils/value";
+
+import type { EllipsoidAppearance } from "../../..";
+import { heightReference, shadowMode } from "../../common";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = EllipsoidAppearance & {
+  // compat
+  position?: LatLng;
+  location?: LatLng;
+  height?: number;
+};
+
+export default function Ellipsoid({ id, isVisible, property, geometry, layer, feature }: Props) {
+  const { show = true } = property ?? {};
+  const coordinates = useMemo(
+    () =>
+      geometry?.type === "Point"
+        ? geometry.coordinates
+        : property?.position
+        ? [property.position.lng, property.position.lat, property.height ?? 0]
+        : property?.location
+        ? [property.location.lng, property.location.lat, property.height ?? 0]
+        : undefined,
+    [geometry?.coordinates, geometry?.type, property?.height, property?.location],
+  );
+
+  const { heightReference: hr, shadows, radius = 1000, fillColor } = property ?? {};
+
+  const pos = useMemo(
+    () =>
+      coordinates
+        ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+        : undefined,
+    [coordinates],
+  );
+
+  const raddi = useMemo(() => {
+    return new Cartesian3(radius, radius, radius);
+  }, [radius]);
+
+  const material = useMemo(() => toColor(fillColor), [fillColor]);
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  return !isVisible || !pos || !show ? null : (
+    <EntityExt
+      id={id}
+      position={pos}
+      layerId={layer?.id}
+      featureId={feature?.id}
+      draggable
+      legacyLocationPropertyKey="default.position"
+      availability={availability}
+      properties={feature?.properties}>
+      <EllipsoidGraphics
+        radii={raddi}
+        material={material}
+        heightReference={heightReference(hr)}
+        shadows={shadowMode(shadows)}
+        distanceDisplayCondition={distanceDisplayCondition}
+      />
+    </EntityExt>
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Marker/index.tsx b/web/src/beta/core/engines/Cesium/Feature/Marker/index.tsx
new file mode 100644
index 0000000000..ba8fa140ee
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Marker/index.tsx
@@ -0,0 +1,214 @@
+import { Cartesian3, Color, HorizontalOrigin, VerticalOrigin, Cartesian2 } from "cesium";
+import { useMemo } from "react";
+import { BillboardGraphics, PointGraphics, LabelGraphics, PolylineGraphics } from "resium";
+
+import { toCSSFont } from "@reearth/beta/utils/value";
+
+import type { MarkerAppearance } from "../../..";
+import { useIcon, ho, vo, heightReference, toColor } from "../../common";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+import marker from "./marker.svg";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = MarkerAppearance & {
+  // compat
+  location?: { lat: number; lng: number };
+  height?: number;
+};
+
+export default function Marker({ property, id, isVisible, geometry, layer, feature }: Props) {
+  const coordinates = useMemo(
+    () =>
+      geometry?.type === "Point"
+        ? geometry.coordinates
+        : property?.location
+        ? [property.location.lng, property.location.lat, property.height ?? 0]
+        : undefined,
+    [geometry?.coordinates, geometry?.type, property?.height, property?.location],
+  );
+
+  const {
+    show = true,
+    extrude,
+    pointSize = 10,
+    style,
+    pointColor,
+    pointOutlineColor,
+    pointOutlineWidth,
+    label,
+    labelTypography,
+    labelText,
+    labelPosition: labelPos = "right",
+    labelBackground,
+    labelBackgroundColor,
+    labelBackgroundPaddingHorizontal,
+    labelBackgroundPaddingVertical,
+    image = marker,
+    imageSize,
+    imageSizeInMeters,
+    imageHorizontalOrigin: horizontalOrigin,
+    imageVerticalOrigin: verticalOrigin,
+    imageColor,
+    imageCrop: crop,
+    imageShadow: shadow,
+    imageShadowColor: shadowColor,
+    imageShadowBlur: shadowBlur,
+    imageShadowPositionX: shadowOffsetX,
+    imageShadowPositionY: shadowOffsetY,
+    heightReference: hr,
+  } = property ?? {};
+
+  const pos = useMemo(() => {
+    return coordinates
+      ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+      : undefined;
+  }, [coordinates]);
+
+  const extrudePoints = useMemo(() => {
+    return extrude && coordinates && typeof coordinates[3] === "number"
+      ? [
+          Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2]),
+          Cartesian3.fromDegrees(coordinates[0], coordinates[1], 0),
+        ]
+      : undefined;
+  }, [coordinates, extrude]);
+
+  const isStyleImage = !style || style === "image";
+  const [icon, imgw, imgh] = useIcon({
+    image: isStyleImage ? image : undefined,
+    imageSize,
+    crop,
+    shadow,
+    shadowColor,
+    shadowBlur,
+    shadowOffsetX,
+    shadowOffsetY,
+  });
+
+  const pixelOffset = useMemo(() => {
+    const padding = 15;
+    const x = (isStyleImage ? imgw : pointSize) / 2 + padding;
+    const y = (isStyleImage ? imgh : pointSize) / 2 + padding;
+    return new Cartesian2(
+      labelPos.includes("left") || labelPos.includes("right")
+        ? x * (labelPos.includes("left") ? -1 : 1)
+        : 0,
+      labelPos.includes("top") || labelPos.includes("bottom")
+        ? y * (labelPos.includes("top") ? -1 : 1)
+        : 0,
+    );
+  }, [isStyleImage, imgw, pointSize, imgh, labelPos]);
+
+  const extrudePointsLineColor = useMemo(() => {
+    return Color.WHITE.withAlpha(0.4);
+  }, []);
+
+  const imageColorCesium = useMemo(() => toColor(imageColor), [imageColor]);
+  const pointColorCesium = useMemo(() => toColor(pointColor), [pointColor]);
+  const pointOutlineColorCesium = useMemo(() => toColor(pointOutlineColor), [pointOutlineColor]);
+  const labelColorCesium = useMemo(() => toColor(labelTypography?.color), [labelTypography?.color]);
+  const labelBackgroundColorCesium = useMemo(
+    () => toColor(labelBackgroundColor),
+    [labelBackgroundColor],
+  );
+  const labelBackgroundPadding = useMemo(
+    // https://cesium.com/learn/cesiumjs/ref-doc/LabelGraphics.html?classFilter=labelgra#backgroundPadding
+    () =>
+      new Cartesian2(labelBackgroundPaddingHorizontal || 7, labelBackgroundPaddingVertical || 5),
+    [labelBackgroundPaddingHorizontal, labelBackgroundPaddingVertical],
+  );
+
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  return !pos || !isVisible || !show ? null : (
+    <>
+      {extrudePoints && (
+        <EntityExt
+          layerId={layer?.id}
+          featureId={feature?.id}
+          unselectable
+          properties={feature?.properties}
+          availability={availability}>
+          <PolylineGraphics
+            positions={extrudePoints}
+            material={extrudePointsLineColor}
+            width={0.5}
+            distanceDisplayCondition={distanceDisplayCondition}
+          />
+        </EntityExt>
+      )}
+      <EntityExt
+        id={id}
+        position={pos}
+        layerId={layer?.id}
+        featureId={feature?.id}
+        draggable
+        properties={feature?.properties}
+        availability={availability}>
+        {style === "point" ? (
+          <PointGraphics
+            pixelSize={pointSize}
+            color={pointColorCesium}
+            outlineColor={pointOutlineColorCesium}
+            outlineWidth={pointOutlineWidth}
+            heightReference={heightReference(hr)}
+            distanceDisplayCondition={distanceDisplayCondition}
+          />
+        ) : (
+          <BillboardGraphics
+            image={icon}
+            color={imageColorCesium}
+            horizontalOrigin={ho(horizontalOrigin)}
+            verticalOrigin={vo(verticalOrigin)}
+            heightReference={heightReference(hr)}
+            distanceDisplayCondition={distanceDisplayCondition}
+            sizeInMeters={imageSizeInMeters}
+          />
+        )}
+        {label && (
+          <LabelGraphics
+            horizontalOrigin={
+              labelPos === "right" || labelPos == "righttop" || labelPos === "rightbottom"
+                ? HorizontalOrigin.LEFT
+                : labelPos === "left" || labelPos === "lefttop" || labelPos === "leftbottom"
+                ? HorizontalOrigin.RIGHT
+                : HorizontalOrigin.CENTER
+            }
+            verticalOrigin={
+              labelPos === "bottom" || labelPos === "rightbottom" || labelPos === "leftbottom"
+                ? VerticalOrigin.TOP
+                : labelPos === "top" || labelPos === "righttop" || labelPos === "lefttop"
+                ? VerticalOrigin.BOTTOM
+                : VerticalOrigin.CENTER
+            }
+            pixelOffset={pixelOffset}
+            fillColor={labelColorCesium}
+            font={toCSSFont(labelTypography, { fontSize: 30 })}
+            text={labelText}
+            showBackground={labelBackground}
+            backgroundColor={labelBackgroundColorCesium}
+            backgroundPadding={labelBackgroundPadding}
+            heightReference={heightReference(hr)}
+            distanceDisplayCondition={distanceDisplayCondition}
+          />
+        )}
+      </EntityExt>
+    </>
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Marker/marker.svg b/web/src/beta/core/engines/Cesium/Feature/Marker/marker.svg
new file mode 100644
index 0000000000..87adcb2bc5
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Marker/marker.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.0292 22.7354C15.1183 21.8682 16.207 20.8883 17.226 19.8127C20.1976 16.676 22 13.3716 22 10C22 4.47715 17.5228 0 12 0C6.47715 0 2 4.47715 2 10C2 13.3716 3.8024 16.676 6.77405 19.8127C7.793 20.8883 8.88175 21.8682 9.97082 22.7354C10.3526 23.0394 10.7078 23.3081 11.0278 23.5392C11.2228 23.68 11.3649 23.7784 11.4453 23.8321C11.7812 24.056 12.2188 24.056 12.5547 23.8321C12.6351 23.7784 12.7772 23.68 12.9722 23.5392C13.2922 23.3081 13.6474 23.0394 14.0292 22.7354ZM15.774 18.4373C14.8242 19.4398 13.8036 20.3584 12.7833 21.1708C12.5048 21.3926 12.2423 21.5936 12 21.7726C11.7577 21.5936 11.4952 21.3926 11.2167 21.1708C10.1964 20.3584 9.17575 19.4398 8.22595 18.4373C5.5726 15.6365 4 12.7534 4 10C4 5.58172 7.58172 2 12 2C16.4183 2 20 5.58172 20 10C20 12.7534 18.4274 15.6365 15.774 18.4373ZM12 14C9.79086 14 8 12.2091 8 10C8 7.79086 9.79086 6 12 6C14.2091 6 16 7.79086 16 10C16 12.2091 14.2091 14 12 14ZM14 10C14 11.1046 13.1046 12 12 12C10.8954 12 10 11.1046 10 10C10 8.89543 10.8954 8 12 8C13.1046 8 14 8.89543 14 10Z" fill="white"/>
+</svg>
diff --git a/web/src/beta/core/engines/Cesium/Feature/Model/index.stories.tsx b/web/src/beta/core/engines/Cesium/Feature/Model/index.stories.tsx
new file mode 100644
index 0000000000..5742a49e02
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Model/index.stories.tsx
@@ -0,0 +1,48 @@
+import { Meta, Story } from "@storybook/react";
+
+import { engine } from "../..";
+import Component, { Props } from "../../../../Map";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const Default = Template.bind([]);
+Default.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [0, 0, 1000],
+          },
+        },
+      },
+      model: {
+        url: "/BoxAnimated.glb",
+        scale: 1000000,
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Model/index.tsx b/web/src/beta/core/engines/Cesium/Feature/Model/index.tsx
new file mode 100644
index 0000000000..df10f95b3a
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Model/index.tsx
@@ -0,0 +1,126 @@
+import { Cartesian3, HeadingPitchRoll, Math as CesiumMath, Transforms } from "cesium";
+import { useMemo } from "react";
+import { ModelGraphics } from "resium";
+
+import { toColor } from "@reearth/beta/utils/value";
+
+import type { ModelAppearance } from "../../..";
+import { colorBlendMode, heightReference, shadowMode } from "../../common";
+import {
+  EntityExt,
+  extractSimpleLayerData,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = ModelAppearance & {
+  location?: { lat: number; lng: number };
+  height?: number;
+};
+
+export default function Model({ id, isVisible, property, geometry, layer, feature }: Props) {
+  const data = extractSimpleLayerData(layer);
+  const isGltfData = data?.type === "gltf";
+
+  const coordinates = useMemo(
+    () =>
+      geometry?.type === "Point"
+        ? geometry.coordinates
+        : property?.location
+        ? [property.location.lng, property.location.lat, property.height ?? 0]
+        : undefined,
+    [geometry?.coordinates, geometry?.type, property?.height, property?.location],
+  );
+  const position = useMemo(() => {
+    return coordinates
+      ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+      : Cartesian3.ZERO;
+  }, [coordinates]);
+
+  const {
+    show = true,
+    model,
+    url,
+    heightReference: hr,
+    heading,
+    pitch,
+    roll,
+    scale,
+    maximumScale,
+    minimumPixelSize,
+    animation = true,
+    shadows = "disabled",
+    colorBlend = "none",
+    color,
+    colorBlendAmount,
+    lightColor,
+    silhouette,
+    silhouetteColor,
+    bearing,
+    silhouetteSize = 1,
+  } = property ?? {};
+
+  const actualUrl = useMemo(() => model || url || data?.url, [model, url, data?.url]);
+  const orientation = useMemo(
+    () =>
+      bearing
+        ? Transforms.headingPitchRollQuaternion(
+            position,
+            HeadingPitchRoll.fromDegrees(bearing - 90.0, 0.0, 0.0),
+          )
+        : Transforms.headingPitchRollQuaternion(
+            position,
+            new HeadingPitchRoll(
+              CesiumMath.toRadians(heading ?? 0),
+              CesiumMath.toRadians(pitch ?? 0),
+              CesiumMath.toRadians(roll ?? 0),
+            ),
+          ),
+    [bearing, heading, pitch, position, roll],
+  );
+
+  const modelColor = useMemo(() => (colorBlend ? toColor(color) : undefined), [colorBlend, color]);
+  const modelLightColor = useMemo(() => toColor(lightColor), [lightColor]);
+  const modelSilhouetteColor = useMemo(() => toColor(silhouetteColor), [silhouetteColor]);
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  // if data type is gltf, layer should be rendered. Otherwise only features should be rendererd.
+  return (isGltfData ? feature : !feature) || !isVisible || !show || !actualUrl ? null : (
+    <EntityExt
+      id={id}
+      position={position}
+      orientation={orientation as any}
+      layerId={layer?.id}
+      featureId={feature?.id}
+      draggable
+      properties={feature?.properties}
+      availability={availability}>
+      <ModelGraphics
+        uri={actualUrl}
+        scale={scale}
+        shadows={shadowMode(shadows)}
+        colorBlendMode={colorBlendMode(colorBlend)}
+        colorBlendAmount={colorBlendAmount}
+        color={modelColor}
+        lightColor={modelLightColor}
+        runAnimations={animation}
+        silhouetteColor={modelSilhouetteColor}
+        silhouetteSize={silhouette ? silhouetteSize : undefined}
+        heightReference={heightReference(hr)}
+        maximumScale={maximumScale}
+        minimumPixelSize={minimumPixelSize}
+        distanceDisplayCondition={distanceDisplayCondition}
+      />
+    </EntityExt>
+  );
+}
+
+export const config: FeatureComponentConfig = {};
diff --git a/web/src/beta/core/engines/Cesium/Feature/PhotoOverlay/hooks.ts b/web/src/beta/core/engines/Cesium/Feature/PhotoOverlay/hooks.ts
new file mode 100644
index 0000000000..bc5ae43ab1
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/PhotoOverlay/hooks.ts
@@ -0,0 +1,99 @@
+import useTransition, { TransitionStatus } from "@rot1024/use-transition";
+import { Math as CesiumMath, EasingFunction } from "cesium";
+import { useCallback, useEffect, useRef } from "react";
+
+import { useDelayedCount, Durations } from "@reearth/beta/utils/use-delayed-count";
+
+import type { Camera } from "../../..";
+import { useContext } from "../context";
+
+export type { TransitionStatus } from "@rot1024/use-transition";
+
+const cameraDuration = 2;
+const cameraExitDuration = 2;
+const fovDuration = 0.5;
+const fovExitDuration = 0.5;
+export const photoDuration = 1;
+export const photoExitDuration = 0.5;
+const defaultFOV = CesiumMath.toRadians(60);
+
+const durations: Durations = [
+  [cameraDuration * 1000, cameraExitDuration * 1000],
+  [fovDuration * 1000, fovExitDuration * 1000],
+  [photoDuration * 1000, photoExitDuration * 1000],
+];
+
+export default function ({ isSelected, camera }: { isSelected?: boolean; camera?: Camera }): {
+  photoOverlayImageTransiton: TransitionStatus;
+  exitPhotoOverlay: () => void;
+} {
+  const { selectionReason, flyTo, getCamera } = useContext();
+
+  // mode 0 = idle, 1 = idle<->fly, 2 = fly<->fov, 3 = fov<->photo, 4 = photo
+  const [mode, prevMode, startTransition] = useDelayedCount(durations);
+  const cameraRef = useRef(camera);
+  cameraRef.current = camera;
+  const storytelling = useRef(false);
+  storytelling.current = selectionReason?.reason === "storytelling";
+  const prevCamera = useRef<Camera>();
+
+  // camera flight
+  useEffect(() => {
+    if ((prevMode ?? 0) > 1 && mode === 1 && prevCamera.current) {
+      flyTo?.(prevCamera.current, {
+        duration: cameraExitDuration,
+        easing: EasingFunction.CUBIC_IN_OUT,
+      });
+      prevCamera.current = undefined;
+    } else if ((prevMode ?? 0) === 0 && mode === 1 && cameraRef.current) {
+      prevCamera.current = getCamera?.();
+      flyTo?.(
+        { ...cameraRef.current, fov: prevCamera.current?.fov },
+        {
+          duration: cameraDuration,
+          easing: EasingFunction.CUBIC_IN_OUT,
+        },
+      );
+    } else if (mode === 2) {
+      const fov =
+        (prevMode ?? 0) === 1 ? cameraRef.current?.fov : prevCamera.current?.fov ?? defaultFOV;
+      flyTo?.(
+        { fov },
+        {
+          duration: (prevMode ?? 0) === 1 ? fovDuration : fovExitDuration,
+          easing: EasingFunction.CUBIC_IN_OUT,
+        },
+      );
+    }
+  }, [flyTo, getCamera, mode, prevMode]);
+
+  // start transition: when selection was changed
+  useEffect(() => {
+    // restore fov
+    if (!isSelected && storytelling.current) {
+      const fov = prevCamera.current?.fov ?? defaultFOV;
+      flyTo?.({ fov }, { duration: 0 });
+    }
+    // skip camera flight when is not selected
+    startTransition(!isSelected, !isSelected);
+  }, [flyTo, startTransition, isSelected]);
+
+  const transition = useTransition(
+    !!isSelected && mode >= 3,
+    (prevMode ?? 0) > 3 ? photoExitDuration * 1000 : photoDuration * 1000,
+    {
+      mountOnEnter: true,
+      unmountOnExit: true,
+    },
+  );
+
+  const exitPhotoOverlay = useCallback(
+    () => startTransition(true, !camera),
+    [camera, startTransition],
+  );
+
+  return {
+    photoOverlayImageTransiton: transition,
+    exitPhotoOverlay,
+  };
+}
diff --git a/web/src/beta/core/engines/Cesium/Feature/PhotoOverlay/index.tsx b/web/src/beta/core/engines/Cesium/Feature/PhotoOverlay/index.tsx
new file mode 100644
index 0000000000..1701a19d74
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/PhotoOverlay/index.tsx
@@ -0,0 +1,160 @@
+import { Cartesian3 } from "cesium";
+import { useMemo } from "react";
+import nl2br from "react-nl2br";
+import { BillboardGraphics } from "resium";
+
+import defaultImage from "@reearth/beta/components/Icon/Icons/primPhotoIcon.svg";
+import Text from "@reearth/beta/components/Text";
+import { styled, useTheme } from "@reearth/services/theme";
+
+import type { LegacyPhotooverlayAppearance } from "../../..";
+import { heightReference, ho, useIcon, vo } from "../../common";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+import useHooks, { photoDuration, photoExitDuration, TransitionStatus } from "./hooks";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = LegacyPhotooverlayAppearance;
+
+export default function PhotoOverlay({
+  id,
+  isVisible,
+  property,
+  geometry,
+  isSelected,
+  layer,
+  feature,
+}: Props) {
+  const coordinates = useMemo(
+    () =>
+      geometry?.type === "Point"
+        ? geometry.coordinates
+        : property?.location
+        ? [property.location.lng, property.location.lat, property.height ?? 0]
+        : undefined,
+    [geometry?.coordinates, geometry?.type, property?.height, property?.location],
+  );
+
+  const {
+    show = true,
+    image,
+    imageSize,
+    imageHorizontalOrigin,
+    imageVerticalOrigin,
+    imageCrop,
+    imageShadow,
+    imageShadowColor,
+    imageShadowBlur,
+    imageShadowPositionX,
+    imageShadowPositionY,
+    heightReference: hr,
+    camera,
+    photoOverlayImage,
+    photoOverlayDescription,
+  } = property ?? {};
+
+  const [canvas] = useIcon({
+    image: image || defaultImage,
+    imageSize: image ? imageSize : undefined,
+    crop: image ? imageCrop : undefined,
+    shadow: image ? imageShadow : undefined,
+    shadowColor: image ? imageShadowColor : undefined,
+    shadowBlur: image ? imageShadowBlur : undefined,
+    shadowOffsetX: image ? imageShadowPositionX : undefined,
+    shadowOffsetY: image ? imageShadowPositionY : undefined,
+  });
+
+  const theme = useTheme();
+
+  const pos = useMemo(
+    () =>
+      coordinates
+        ? Cartesian3.fromDegrees(coordinates[0], coordinates[1], coordinates[2])
+        : undefined,
+    [coordinates],
+  );
+
+  const { photoOverlayImageTransiton, exitPhotoOverlay } = useHooks({
+    camera,
+    isSelected: isSelected && !!photoOverlayImage,
+  });
+
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  return !isVisible || !show || !pos ? null : (
+    <>
+      <EntityExt
+        id={id}
+        position={pos}
+        layerId={layer?.id}
+        featureId={feature?.id}
+        draggable
+        properties={feature?.properties}
+        availability={availability}>
+        <BillboardGraphics
+          image={canvas}
+          horizontalOrigin={ho(imageHorizontalOrigin)}
+          verticalOrigin={vo(imageVerticalOrigin)}
+          heightReference={heightReference(hr)}
+          distanceDisplayCondition={distanceDisplayCondition}
+        />
+      </EntityExt>
+      {photoOverlayImageTransiton === "unmounted" ? null : (
+        <PhotoWrapper transition={photoOverlayImageTransiton} onClick={exitPhotoOverlay}>
+          <Photo src={photoOverlayImage} />
+          {photoOverlayDescription && (
+            <Description size="xs" color={theme.main.text}>
+              {nl2br(photoOverlayDescription)}
+            </Description>
+          )}
+        </PhotoWrapper>
+      )}
+    </>
+  );
+}
+
+const PhotoWrapper = styled.div<{ transition: TransitionStatus }>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: ${({ transition }) =>
+    transition === "entering" || transition === "exiting"
+      ? `all ${transition === "exiting" ? photoExitDuration : photoDuration}s ease`
+      : null};
+  opacity: ${({ transition }) => (transition === "entering" || transition === "entered" ? 1 : 0)};
+`;
+
+const Photo = styled.img`
+  max-width: 95%;
+  max-height: 80%;
+  box-shadow: 0 0 15px rgba(0, 0, 0, 1);
+`;
+
+const Description = styled(Text)`
+  position: absolute;
+  bottom: 10px;
+  left: 20px;
+  right: 20px;
+  text-align: left;
+`;
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Polygon/index.stories.tsx b/web/src/beta/core/engines/Cesium/Feature/Polygon/index.stories.tsx
new file mode 100644
index 0000000000..d64e7606b8
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Polygon/index.stories.tsx
@@ -0,0 +1,174 @@
+import { Meta, Story } from "@storybook/react";
+
+import { engine } from "../..";
+import Component, { Props } from "../../../../Map";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const Basic = Template.bind([]);
+Basic.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [0, 0],
+                [0, 10],
+                [10, 10],
+                [10, 0],
+                [0, 0],
+              ],
+              [
+                [5, 5],
+                [7, 5],
+                [7, 7],
+                [5, 7],
+                [5, 5],
+              ],
+            ],
+          },
+        },
+      },
+      polygon: {
+        stroke: true,
+        strokeWidth: 10,
+        strokeColor: "blue",
+        fillColor: "red",
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
+
+export const Excluded = Template.bind([]);
+Excluded.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [0, 0],
+                [0, 10],
+                [10, 10],
+                [10, 0],
+                [0, 0],
+              ],
+              [
+                [5, 5],
+                [7, 5],
+                [7, 7],
+                [5, 7],
+                [5, 5],
+              ],
+            ],
+          },
+        },
+      },
+      polygon: {
+        stroke: true,
+        strokeWidth: 10,
+        strokeColor: "blue",
+        fillColor: "red",
+        extrudedHeight: 100000,
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
+
+export const ClampToGround = Template.bind([]);
+ClampToGround.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          properties: {},
+          geometry: {
+            coordinates: [
+              [
+                [137.74631070393525, 35.654778982881425],
+                [137.74631070393525, 35.56614718408652],
+                [137.81686198363366, 35.56614718408652],
+                [137.81686198363366, 35.654778982881425],
+                [137.74631070393525, 35.654778982881425],
+              ],
+            ],
+            type: "Polygon",
+          },
+        },
+      },
+      polygon: {
+        stroke: true,
+        strokeWidth: 10,
+        strokeColor: "blue",
+        fillColor: "red",
+        heightReference: "clamp",
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+    terrain: {
+      terrain: true,
+      terrainType: "cesium",
+      depthTestAgainstTerrain: true,
+    },
+  },
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Polygon/index.tsx b/web/src/beta/core/engines/Cesium/Feature/Polygon/index.tsx
new file mode 100644
index 0000000000..434d600577
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Polygon/index.tsx
@@ -0,0 +1,152 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { Cartesian3, PolygonHierarchy } from "cesium";
+import { isEqual } from "lodash-es";
+import { useMemo } from "react";
+import { Entity, PolygonGraphics, PolylineGraphics } from "resium";
+import { useCustomCompareMemo } from "use-custom-compare";
+
+import { Polygon as PolygonValue, toColor } from "@reearth/beta/utils/value";
+
+import type { PolygonAppearance } from "../../..";
+import { classificationType, heightReference, shadowMode } from "../../common";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+export type Props = FeatureProps<Property> & { disableWorkaround?: boolean };
+
+export type Property = PolygonAppearance & {
+  polygon?: PolygonValue;
+};
+
+export default function Polygon({
+  id,
+  isVisible,
+  property,
+  geometry,
+  layer,
+  feature,
+  disableWorkaround,
+}: Props) {
+  const coordiantes = useMemo(
+    () =>
+      geometry?.type === "Polygon"
+        ? geometry.coordinates
+        : property?.polygon
+        ? property.polygon.map(p => p.map(q => [q.lng, q.lat, q.height]))
+        : undefined,
+    [geometry?.coordinates, geometry?.type, property?.polygon],
+  );
+
+  const {
+    show = true,
+    fill = true,
+    stroke,
+    fillColor,
+    strokeColor,
+    strokeWidth = 1,
+    heightReference: hr,
+    shadows,
+    extrudedHeight,
+    classificationType: ct,
+  } = property ?? {};
+
+  const hierarchy = useCustomCompareMemo(
+    () =>
+      coordiantes?.[0]
+        ? new PolygonHierarchy(
+            coordiantes[0].map(c => Cartesian3.fromDegrees(c[0], c[1], c[2] ?? 0)),
+            coordiantes
+              .slice(1)
+              .map(
+                p =>
+                  new PolygonHierarchy(p.map(c => Cartesian3.fromDegrees(c[0], c[1], c[2] ?? 0))),
+              ),
+          )
+        : undefined,
+    [coordiantes ?? []],
+    isEqual,
+  );
+
+  const strokes = useMemo(
+    () =>
+      coordiantes && stroke && !disableWorkaround
+        ? coordiantes.flatMap(hole => [
+            // bottom
+            hole.map(c => Cartesian3.fromDegrees(c[0], c[1], c[2] ?? 0)),
+            ...(extrudedHeight
+              ? [
+                  // top
+                  hole.map(c => Cartesian3.fromDegrees(c[0], c[1], extrudedHeight)),
+                  // vertical
+                  ...hole
+                    .slice(0, -1)
+                    .map(c => [
+                      Cartesian3.fromDegrees(c[0], c[1], 0),
+                      Cartesian3.fromDegrees(c[0], c[1], extrudedHeight),
+                    ]),
+                ]
+              : []),
+          ])
+        : [],
+    [coordiantes, stroke, disableWorkaround],
+  );
+
+  const memoStrokeColor = useMemo(
+    () => (stroke ? toColor(strokeColor) : undefined),
+    [stroke, strokeColor],
+  );
+  const memoFillColor = useMemo(() => (fill ? toColor(fillColor) : undefined), [fill, fillColor]);
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  return !isVisible || !coordiantes || !show ? null : (
+    <>
+      <EntityExt
+        id={id}
+        layerId={layer?.id}
+        featureId={feature?.id}
+        availability={availability}
+        properties={feature?.properties}>
+        <PolygonGraphics
+          hierarchy={hierarchy}
+          fill={fill}
+          material={memoFillColor}
+          outline={!!memoStrokeColor}
+          outlineColor={memoStrokeColor}
+          outlineWidth={strokeWidth}
+          heightReference={heightReference(hr)}
+          shadows={shadowMode(shadows)}
+          extrudedHeight={extrudedHeight}
+          distanceDisplayCondition={distanceDisplayCondition}
+          classificationType={classificationType(ct)}
+        />
+      </EntityExt>
+      {/* workaround */}
+      {strokes?.map((p, i) => (
+        <Entity key={i} id={`${id}-stroke${i}`}>
+          <PolylineGraphics
+            positions={p}
+            clampToGround={hr == "clamp" || hr == "relative"}
+            width={strokeWidth}
+            material={memoStrokeColor}
+            shadows={shadowMode(shadows)}
+            distanceDisplayCondition={distanceDisplayCondition}
+            classificationType={classificationType(ct)}
+          />
+        </Entity>
+      ))}
+    </>
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Polyline/index.tsx b/web/src/beta/core/engines/Cesium/Feature/Polyline/index.tsx
new file mode 100644
index 0000000000..b392f21690
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Polyline/index.tsx
@@ -0,0 +1,79 @@
+import { Cartesian3 } from "cesium";
+import { isEqual } from "lodash-es";
+import { useMemo } from "react";
+import { PolylineGraphics } from "resium";
+import { useCustomCompareMemo } from "use-custom-compare";
+
+import { Coordinates, toColor } from "@reearth/beta/utils/value";
+
+import type { PolylineAppearance } from "../../..";
+import { classificationType, shadowMode } from "../../common";
+import {
+  EntityExt,
+  toDistanceDisplayCondition,
+  toTimeInterval,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = PolylineAppearance & {
+  coordinates?: Coordinates;
+};
+
+export default function Polyline({ id, isVisible, property, geometry, layer, feature }: Props) {
+  const { show = true } = property || {};
+  const coordinates = useMemo(
+    () =>
+      geometry?.type === "LineString"
+        ? geometry.coordinates
+        : property?.coordinates
+        ? property.coordinates.map(p => [p.lng, p.lat, p.height])
+        : undefined,
+    [geometry?.coordinates, geometry?.type, property?.coordinates],
+  );
+
+  const {
+    clampToGround,
+    strokeColor,
+    strokeWidth = 1,
+    shadows,
+    classificationType: ct,
+  } = property ?? {};
+
+  const positions = useCustomCompareMemo(
+    () => coordinates?.map(c => Cartesian3.fromDegrees(c[0], c[1], c[2])),
+    [coordinates ?? []],
+    isEqual,
+  );
+  const material = useMemo(() => toColor(strokeColor), [strokeColor]);
+  const availability = useMemo(() => toTimeInterval(feature?.interval), [feature?.interval]);
+  const distanceDisplayCondition = useMemo(
+    () => toDistanceDisplayCondition(property?.near, property?.far),
+    [property?.near, property?.far],
+  );
+
+  return !isVisible || !coordinates || !show ? null : (
+    <EntityExt
+      id={id}
+      layerId={layer?.id}
+      featureId={feature?.id}
+      availability={availability}
+      properties={feature?.properties}>
+      <PolylineGraphics
+        positions={positions}
+        width={strokeWidth}
+        material={material}
+        clampToGround={clampToGround}
+        shadows={shadowMode(shadows)}
+        distanceDisplayCondition={distanceDisplayCondition}
+        classificationType={classificationType(ct)}
+      />
+    </EntityExt>
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noLayer: true,
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Raster/hooks.ts b/web/src/beta/core/engines/Cesium/Feature/Raster/hooks.ts
new file mode 100644
index 0000000000..b84a2ecf32
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Raster/hooks.ts
@@ -0,0 +1,43 @@
+import { ImageryLayerCollection, ImageryProvider } from "cesium";
+import { useEffect, useMemo } from "react";
+import { useCesium } from "resium";
+
+import type { ComputedLayer, RasterAppearance } from "../../..";
+import { attachTag, extractSimpleLayerData } from "../utils";
+
+export const useImageryProvider = (
+  imageryProvider: ImageryProvider | undefined,
+  layerId: string | undefined,
+  property: RasterAppearance | undefined,
+) => {
+  const { viewer } = useCesium();
+  const alpha = property?.alpha;
+  useEffect(() => {
+    if (!imageryProvider || !viewer) return;
+    const imageryLayers: ImageryLayerCollection = viewer.imageryLayers;
+    const imageryLayer = imageryLayers.addImageryProvider(imageryProvider);
+    if (alpha !== undefined && typeof alpha === "number") {
+      imageryLayer.alpha = alpha;
+    }
+    attachTag(imageryLayer, { layerId });
+    return () => {
+      imageryLayers.remove(imageryLayer);
+    };
+  }, [imageryProvider, viewer, layerId, alpha]);
+};
+
+export const useData = (layer: ComputedLayer | undefined) => {
+  return useMemo(() => {
+    const data = extractSimpleLayerData(layer);
+    return {
+      type: data?.type,
+      url: data?.url,
+      layers: data?.layers
+        ? Array.isArray(data.layers)
+          ? data.layers.join(",")
+          : data?.layers
+        : undefined,
+      parameters: data?.parameters,
+    };
+  }, [layer]);
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Raster/index.stories.tsx b/web/src/beta/core/engines/Cesium/Feature/Raster/index.stories.tsx
new file mode 100644
index 0000000000..8666152b11
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Raster/index.stories.tsx
@@ -0,0 +1,77 @@
+import { Meta, Story } from "@storybook/react";
+
+import { engine } from "../..";
+import Component, { Props } from "../../../../Map";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const WMS = Template.bind([]);
+WMS.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "wms",
+        url: "https://gibs.earthdata.nasa.gov/wms/epsg3857/best/wms.cgi",
+        layers: "IMERG_Precipitation_Rate",
+      },
+      raster: {
+        maximumLevel: 100,
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
+
+export const MVT = Template.bind([]);
+MVT.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "mvt",
+        url: "https://example.com/exmaple.mvt", // You need to set MVT URL.
+        layers: "road",
+      },
+      polygon: {
+        fillColor: "white",
+        strokeColor: "white",
+        strokeWidth: 1,
+        lineJoin: "round",
+      },
+      raster: {},
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Raster/index.tsx b/web/src/beta/core/engines/Cesium/Feature/Raster/index.tsx
new file mode 100644
index 0000000000..b6312e5f83
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Raster/index.tsx
@@ -0,0 +1,37 @@
+import { isEqual } from "lodash-es";
+import { memo } from "react";
+
+import { extractSimpleLayer, extractSimpleLayerData, type FeatureComponentConfig } from "../utils";
+
+import { useMVT } from "./mvt";
+import { useTiles } from "./tiles";
+import { useTMS } from "./tms";
+import type { Props } from "./types";
+import { useWMS } from "./wms";
+
+function Raster({ isVisible, layer, property, evalFeature }: Props) {
+  useWMS({ isVisible, layer, property });
+  useTiles({ isVisible, layer, property });
+  useTMS({ isVisible, layer, property });
+  useMVT({ isVisible, layer, property, evalFeature });
+
+  return null;
+}
+
+export default memo(
+  Raster,
+  (prev, next) =>
+    // In Raster component, we only use polygon, polyline and marker, so we only check polygon in layer props.
+    isEqual(extractSimpleLayer(prev.layer)?.polygon, extractSimpleLayer(next.layer)?.polygon) &&
+    isEqual(extractSimpleLayer(prev.layer)?.polyline, extractSimpleLayer(next.layer)?.polyline) &&
+    isEqual(extractSimpleLayer(prev.layer)?.marker, extractSimpleLayer(next.layer)?.marker) &&
+    isEqual(extractSimpleLayerData(prev.layer), extractSimpleLayerData(next.layer)) &&
+    isEqual(prev.property, next.property) &&
+    prev.isVisible === next.isVisible &&
+    prev.evalFeature === next.evalFeature &&
+    prev.onComputedFeatureFetch === next.onComputedFeatureFetch,
+);
+
+export const config: FeatureComponentConfig = {
+  noFeature: true,
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Raster/mvt.ts b/web/src/beta/core/engines/Cesium/Feature/Raster/mvt.ts
new file mode 100644
index 0000000000..4fa670afcd
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Raster/mvt.ts
@@ -0,0 +1,272 @@
+import { VectorTileFeature } from "@mapbox/vector-tile";
+import type { Polygon, LineString, Point } from "@turf/turf";
+import { ImageryLayerFeatureInfo } from "cesium";
+import { MVTImageryProvider } from "cesium-mvt-imagery-provider";
+import { useEffect, useMemo, useRef } from "react";
+
+import type {
+  ComputedFeature,
+  Feature,
+  PolygonAppearance,
+  Geometry,
+  PolylineAppearance,
+  MarkerAppearance,
+} from "../../..";
+import { usePick, extractSimpleLayer, generateIDWithMD5 } from "../utils";
+
+import { useData, useImageryProvider } from "./hooks";
+import type { Props } from "./types";
+import { normalizeUrl } from "./utils";
+
+type TileCoords = { x: number; y: number; level: number };
+
+export const useMVT = ({
+  isVisible,
+  property,
+  layer,
+  evalFeature,
+}: Pick<Props, "isVisible" | "property" | "layer" | "evalFeature">) => {
+  const { show = true, minimumLevel, maximumLevel, credit } = property ?? {};
+  const { type, url, layers } = useData(layer);
+
+  const cachedCalculatedLayerRef = useRef(layer);
+
+  const layerSimple = extractSimpleLayer(layer);
+  const layerPolygonAppearance = usePick(layerSimple?.polygon, polygonAppearanceFields);
+  const layerPolylineAppearance = usePick(layerSimple?.polyline, polylineAppearanceFields);
+  const layerMarkerAppearance = usePick(layerSimple?.marker, markerAppearanceFields);
+
+  const updatedAt = useRef<number>();
+
+  const imageryProvider = useMemo(
+    () => {
+      if (!isVisible || !show || !url || !layers || type !== "mvt") return;
+      let currentTime: number | undefined;
+      const cachedStyleMap = new Map();
+      return new MVTImageryProvider({
+        minimumLevel,
+        maximumLevel,
+        credit,
+        urlTemplate: normalizeUrl(url, "mvt") as `http${"s" | ""}://${string}/{z}/{x}/{y}${string}`,
+        layerName: layers,
+        onRenderFeature: () => {
+          if (!currentTime) {
+            currentTime = updatedAt.current;
+          }
+          return currentTime === updatedAt.current;
+        },
+        style: (mvtFeature, tile) => {
+          const styleCacheKey = JSON.stringify(mvtFeature.properties);
+          const cachedStyle = cachedStyleMap.get(styleCacheKey);
+          if (cachedStyle) {
+            return cachedStyle;
+          }
+          const appearanceType = (() => {
+            switch (VectorTileFeature.types[mvtFeature.type]) {
+              case "Polygon":
+                return "polygon";
+              case "LineString":
+                return "polyline";
+              case "Point":
+                return "marker";
+            }
+          })();
+          const computedFeature = ((): ComputedFeature | void => {
+            const layer = cachedCalculatedLayerRef.current?.layer;
+            if (layer?.type !== "simple") {
+              return;
+            }
+            const feature = makeFeature("", mvtFeature, tile, appearanceType);
+            if (feature) {
+              return evalFeature?.(layer, feature);
+            }
+          })();
+
+          const style = (() => {
+            if (appearanceType === "polygon") {
+              const polygon = computedFeature?.polygon;
+              return {
+                fillStyle:
+                  (polygon?.fill ?? true) && (polygon?.show ?? true)
+                    ? polygon?.fillColor
+                    : "rgba(0,0,0,0)", // hide the feature
+                strokeStyle:
+                  polygon?.stroke && (polygon?.show ?? true)
+                    ? polygon?.strokeColor
+                    : "rgba(0,0,0,0)", // hide the feature
+                lineWidth: polygon?.strokeWidth,
+                lineJoin: polygon?.lineJoin,
+              };
+            }
+            if (appearanceType === "polyline") {
+              const polyline = computedFeature?.polyline;
+              return {
+                fillStyle:
+                  (polyline?.strokeColor ?? true) && (polyline?.show ?? true)
+                    ? polyline?.strokeColor
+                    : "rgba(0,0,0,0)", // hide the feature
+                strokeStyle:
+                  polyline?.strokeColor && (polyline?.show ?? true)
+                    ? polyline?.strokeColor
+                    : "rgba(0,0,0,0)", // hide the feature
+                lineWidth: polyline?.strokeWidth,
+              };
+            }
+            if (appearanceType === "marker") {
+              const marker = computedFeature?.marker;
+              return {
+                fillStyle:
+                  (marker?.pointColor ?? true) && (marker?.show ?? true)
+                    ? marker?.pointColor
+                    : "rgba(0,0,0,0)", // hide the feature
+                strokeStyle:
+                  marker?.pointColor && (marker?.show ?? true)
+                    ? marker?.pointColor
+                    : "rgba(0,0,0,0)", // hide the feature
+                lineWidth: marker?.pointSize,
+              };
+            }
+            return;
+          })();
+          cachedStyleMap.set(styleCacheKey, style);
+          return style;
+        },
+        onSelectFeature: (mvtFeature, tile) => {
+          const layer = extractSimpleLayer(cachedCalculatedLayerRef.current?.layer);
+          if (!layer) {
+            return;
+          }
+          const appearanceType = (() => {
+            switch (VectorTileFeature.types[mvtFeature.type]) {
+              case "Polygon":
+                return "polygon";
+              case "LineString":
+                return "polyline";
+              case "Point":
+                return "marker";
+            }
+          })();
+          const id = mvtFeature.id
+            ? String(mvtFeature.id)
+            : idFromGeometry(mvtFeature.loadGeometry(), tile);
+          const feature = evalFeature(layer, makeFeature(id, mvtFeature, tile, appearanceType));
+          const info = new ImageryLayerFeatureInfo();
+          info.data = {
+            layerId: layer?.id,
+            featureId: id,
+            feature,
+            appearanceType: VectorTileFeature.types[mvtFeature.type].toLowerCase(),
+          };
+          return info;
+        },
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- Render MVT depends on appearance
+    [
+      isVisible,
+      show,
+      url,
+      layers,
+      type,
+      minimumLevel,
+      maximumLevel,
+      credit,
+      evalFeature,
+      layerPolygonAppearance,
+      layerPolylineAppearance,
+      layerMarkerAppearance,
+    ],
+  );
+
+  const cacheKeyForUpdatedAt = useMemo(
+    () =>
+      JSON.stringify(layerPolygonAppearance) +
+      JSON.stringify(layerPolylineAppearance) +
+      JSON.stringify(layerMarkerAppearance),
+    [layerPolygonAppearance, layerPolylineAppearance, layerMarkerAppearance],
+  );
+
+  useEffect(() => {
+    updatedAt.current = Date.now();
+  }, [cacheKeyForUpdatedAt]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  useEffect(() => {
+    cachedCalculatedLayerRef.current = layer;
+  }, [layer]);
+
+  useImageryProvider(imageryProvider, layer?.id, property);
+};
+
+const idFromGeometry = (
+  geometry: ReturnType<VectorTileFeature["loadGeometry"]>,
+  tile: TileCoords,
+) => {
+  const id = [tile.x, tile.y, tile.level, ...geometry.flatMap(i => i.map(j => [j.x, j.y]))].join(
+    ":",
+  );
+
+  return generateIDWithMD5(id);
+};
+
+const makeFeature = (
+  id: string,
+  feature: VectorTileFeature,
+  tile: TileCoords,
+  appearance: "polygon" | "polyline" | "marker",
+): Feature => {
+  const geometry = feature.loadGeometry();
+  const [type, coordinates] = (() => {
+    if (appearance === "polygon") {
+      return [
+        "Polygon" as Polygon["type"],
+        geometry.map(points => points.map(p => [p.x, p.y])) as Polygon["coordinates"],
+      ];
+    }
+    if (appearance === "polyline") {
+      return [
+        "LineString" as LineString["type"],
+        geometry[0].map(p => [p.x, p.y]) as LineString["coordinates"],
+      ];
+    }
+    if (appearance === "marker") {
+      return [
+        "Point" as Point["type"],
+        [geometry[0][0].x, geometry[0][0].y] as Point["coordinates"],
+      ];
+    }
+
+    throw new Error(`Unexpected appearance ${appearance}`);
+  })();
+  return {
+    type: "feature",
+    id,
+    geometry: {
+      type,
+      coordinates,
+    } as Geometry,
+    properties: feature.properties,
+    range: {
+      x: tile.x,
+      y: tile.y,
+      z: tile.level,
+    },
+  };
+};
+
+const polygonAppearanceFields: (keyof PolygonAppearance)[] = [
+  "show",
+  "fill",
+  "fillColor",
+  "stroke",
+  "strokeColor",
+  "strokeWidth",
+  "lineJoin",
+];
+
+const polylineAppearanceFields: (keyof PolylineAppearance)[] = [
+  "show",
+  "strokeColor",
+  "strokeWidth",
+];
+
+const markerAppearanceFields: (keyof MarkerAppearance)[] = ["show", "pointColor", "pointSize"];
diff --git a/web/src/beta/core/engines/Cesium/Feature/Raster/tiles.ts b/web/src/beta/core/engines/Cesium/Feature/Raster/tiles.ts
new file mode 100644
index 0000000000..661733cb6a
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Raster/tiles.ts
@@ -0,0 +1,27 @@
+import { UrlTemplateImageryProvider } from "cesium";
+import { useMemo } from "react";
+
+import { useData, useImageryProvider } from "./hooks";
+import type { Props } from "./types";
+import { normalizeUrl } from "./utils";
+
+export const useTiles = ({
+  isVisible,
+  property,
+  layer,
+}: Pick<Props, "isVisible" | "property" | "layer">) => {
+  const { show = true, minimumLevel, maximumLevel, credit } = property ?? {};
+  const { type, url } = useData(layer);
+
+  const imageryProvider = useMemo(() => {
+    if (!isVisible || !show || !url || type !== "tiles") return;
+    return new UrlTemplateImageryProvider({
+      url: normalizeUrl(url, "png"),
+      minimumLevel,
+      maximumLevel,
+      credit,
+    });
+  }, [isVisible, show, url, type, minimumLevel, maximumLevel, credit]);
+
+  useImageryProvider(imageryProvider, layer?.id, property);
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Raster/tms.ts b/web/src/beta/core/engines/Cesium/Feature/Raster/tms.ts
new file mode 100644
index 0000000000..aa7b47de30
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Raster/tms.ts
@@ -0,0 +1,31 @@
+import { TileMapServiceImageryProvider } from "cesium";
+import { useEffect, useState } from "react";
+
+import { useData, useImageryProvider } from "./hooks";
+import type { Props } from "./types";
+
+export const useTMS = ({
+  isVisible,
+  property,
+  layer,
+}: Pick<Props, "isVisible" | "property" | "layer">) => {
+  const { show = true, minimumLevel, maximumLevel, credit } = property ?? {};
+  const { type, url } = useData(layer);
+  const [imageryProvider, setImageryProvider] = useState<TileMapServiceImageryProvider>();
+
+  useEffect(() => {
+    if (!isVisible || !show || !url || type !== "tms") return;
+    const create = async () => {
+      setImageryProvider(
+        await TileMapServiceImageryProvider.fromUrl(url, {
+          minimumLevel,
+          maximumLevel,
+          credit,
+        }),
+      );
+    };
+    create();
+  }, [isVisible, show, url, type, minimumLevel, maximumLevel, credit]);
+
+  useImageryProvider(imageryProvider, layer?.id, property);
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Raster/types.ts b/web/src/beta/core/engines/Cesium/Feature/Raster/types.ts
new file mode 100644
index 0000000000..3e905db54b
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Raster/types.ts
@@ -0,0 +1,6 @@
+import { RasterAppearance } from "@reearth/beta/core/mantle";
+
+import { FeatureProps } from "../utils";
+
+export type Props = FeatureProps<Property>;
+export type Property = RasterAppearance;
diff --git a/web/src/beta/core/engines/Cesium/Feature/Raster/utils.test.ts b/web/src/beta/core/engines/Cesium/Feature/Raster/utils.test.ts
new file mode 100644
index 0000000000..ff42c279f9
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Raster/utils.test.ts
@@ -0,0 +1,14 @@
+import { expect, test } from "vitest";
+
+import { normalizeUrl } from "./utils";
+
+test("normalizeUrl", () => {
+  expect(normalizeUrl("https://aaaa", "png")).toBe("https://aaaa/{z}/{x}/{y}.png");
+  expect(normalizeUrl("https://aaaa/bbbb/", "png")).toBe("https://aaaa/bbbb/{z}/{x}/{y}.png");
+  expect(normalizeUrl("https://aaaa/bbbb/{z}/{x}/{y}.png", "png")).toBe(
+    "https://aaaa/bbbb/{z}/{x}/{y}.png",
+  );
+  expect(normalizeUrl("https://aaaa/bbbb/%7Bz%7D/%7Bx%7D/%7By%7D.png", "png")).toBe(
+    "https://aaaa/bbbb/{z}/{x}/{y}.png",
+  );
+});
diff --git a/web/src/beta/core/engines/Cesium/Feature/Raster/utils.ts b/web/src/beta/core/engines/Cesium/Feature/Raster/utils.ts
new file mode 100644
index 0000000000..e85468bd5c
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Raster/utils.ts
@@ -0,0 +1,10 @@
+export function normalizeUrl(url: string, ext: string): string {
+  if (!url) return "";
+  let u = url.replace("/%7Bz%7D", "/{z}").replace("/%7Bx%7D", "/{x}").replace("/%7By%7D", "/{y}");
+  if (!u.includes("/{z}/{x}/{y}.")) {
+    if (u[u.length - 1] !== "/") u += "/";
+    u += "{z}/{x}/{y}." + ext;
+  }
+
+  return u;
+}
diff --git a/web/src/beta/core/engines/Cesium/Feature/Raster/wms.ts b/web/src/beta/core/engines/Cesium/Feature/Raster/wms.ts
new file mode 100644
index 0000000000..3e75381a7c
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Raster/wms.ts
@@ -0,0 +1,28 @@
+import { WebMapServiceImageryProvider } from "cesium";
+import { useMemo } from "react";
+
+import { useData, useImageryProvider } from "./hooks";
+import type { Props } from "./types";
+
+export const useWMS = ({
+  isVisible,
+  property,
+  layer,
+}: Pick<Props, "isVisible" | "property" | "layer">) => {
+  const { show = true, minimumLevel, maximumLevel, credit } = property ?? {};
+  const { type, url, layers, parameters } = useData(layer);
+
+  const imageryProvider = useMemo(() => {
+    if (!isVisible || !show || !url || !layers || type !== "wms") return;
+    return new WebMapServiceImageryProvider({
+      url,
+      layers,
+      minimumLevel,
+      maximumLevel,
+      credit,
+      parameters,
+    });
+  }, [isVisible, show, url, layers, type, minimumLevel, maximumLevel, credit, parameters]);
+
+  useImageryProvider(imageryProvider, layer?.id, property);
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Resource/index.stories.tsx b/web/src/beta/core/engines/Cesium/Feature/Resource/index.stories.tsx
new file mode 100644
index 0000000000..b4aa8b9192
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Resource/index.stories.tsx
@@ -0,0 +1,46 @@
+import { Meta, Story } from "@storybook/react";
+
+import { engine } from "../..";
+import Component, { Props } from "../../../../Map";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const Default = Template.bind([]);
+Default.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "czml",
+        url: "/testdata/sample.czml",
+      },
+      resource: {},
+      marker: {
+        pointColor: {
+          expression: {
+            conditions: [["${id} === '1'", "color('red')"]],
+          },
+        },
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Resource/index.tsx b/web/src/beta/core/engines/Cesium/Feature/Resource/index.tsx
new file mode 100644
index 0000000000..922dd3aad2
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Resource/index.tsx
@@ -0,0 +1,180 @@
+import { Entity, type DataSource, Color } from "cesium";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { KmlDataSource, CzmlDataSource, GeoJsonDataSource, useCesium } from "resium";
+
+import { ComputedFeature, evalFeature, Feature, guessType } from "@reearth/beta/core/mantle";
+import { requestIdleCallbackWithRequiredWork } from "@reearth/beta/utils/idle";
+
+import type { ResourceAppearance } from "../../..";
+import {
+  attachTag,
+  extractSimpleLayerData,
+  type FeatureComponentConfig,
+  type FeatureProps,
+} from "../utils";
+
+import { attachStyle } from "./utils";
+
+export type Props = FeatureProps<Property>;
+export type Property = ResourceAppearance;
+const types: Record<string, "geojson" | "kml" | "czml"> = {
+  kml: "kml",
+  geojson: "geojson",
+  czml: "czml",
+};
+
+const comps = {
+  kml: KmlDataSource,
+  czml: CzmlDataSource,
+  geojson: GeoJsonDataSource,
+};
+
+type CachedFeature = {
+  feature: Feature;
+  raw: Entity;
+};
+
+export default function Resource({
+  isVisible,
+  property,
+  layer,
+  onComputedFeatureFetch,
+  onComputedFeatureDelete,
+}: Props) {
+  const {
+    show = true,
+    clampToGround,
+    stroke,
+    strokeWidth,
+    markerColor,
+    markerSize,
+    fill,
+  } = property ?? {};
+  const [type, url, updateClock] = useMemo((): [
+    ResourceAppearance["type"],
+    string | undefined,
+    boolean,
+  ] => {
+    const data = extractSimpleLayerData(layer);
+    const type = property?.type;
+    const url = property?.url;
+    return [
+      type ?? (data?.type as ResourceAppearance["type"]),
+      url ?? data?.url,
+      !!data?.time?.updateClockOnLoad,
+    ];
+  }, [property, layer]);
+  const { viewer } = useCesium();
+  const cachedFeatures = useRef<CachedFeature[]>([]);
+  const cachedFeatureIds = useRef(new Set<string>());
+
+  const ext = useMemo(() => (!type || type === "auto" ? guessType(url) : undefined), [type, url]);
+  const actualType = ext ? types[ext] : type !== "auto" ? type : undefined;
+  const Component = actualType ? comps[actualType] : undefined;
+
+  const handleChange = useCallback(
+    (e: DataSource) => {
+      if (!viewer) return;
+      const features: Feature[] = [];
+      const computedFeatures: ComputedFeature[] = [];
+      e.entities.values.forEach(e => {
+        const res = attachStyle(e, layer, evalFeature, viewer.clock.currentTime);
+        const [feature, computedFeature] = res || [];
+
+        attachTag(e, { layerId: layer?.id, featureId: feature?.id });
+
+        if (feature && !cachedFeatureIds.current.has(feature.id)) {
+          features.push(feature);
+          cachedFeatures.current.push({ feature, raw: e });
+          cachedFeatureIds.current.add(feature.id);
+        }
+        if (computedFeature) {
+          computedFeatures.push(computedFeature);
+        }
+      });
+
+      // GeoJSON is not delegated data, so we need to skip.
+      if (type !== "geojson") {
+        onComputedFeatureFetch?.(features, computedFeatures);
+      }
+    },
+    [layer, viewer, onComputedFeatureFetch, type],
+  );
+
+  const initialClock = useRef({
+    start: viewer?.clock.startTime,
+    stop: viewer?.clock.stopTime,
+    current: viewer?.clock.currentTime,
+  });
+  const handleLoad = useCallback(
+    (ds: DataSource) => {
+      if (!viewer?.clock) return;
+      if (!updateClock) {
+        if (
+          initialClock.current.current &&
+          initialClock.current.start &&
+          initialClock.current.stop
+        ) {
+          viewer.clock.currentTime = initialClock.current.current;
+          viewer.clock.startTime = initialClock.current.start;
+          viewer.clock.stopTime = initialClock.current.stop;
+        }
+        return;
+      }
+      if (ds.clock) {
+        viewer.clock.currentTime = ds.clock.currentTime;
+        viewer.clock.startTime = ds.clock.startTime;
+        viewer.clock.stopTime = ds.clock.stopTime;
+      }
+    },
+    [updateClock, viewer?.clock],
+  );
+
+  // convert hexCodeColorString to ColorValue?s
+  const strokeValue = useMemo(
+    () => (stroke ? Color.fromCssColorString(stroke) : undefined),
+    [stroke],
+  );
+  const fillValue = useMemo(() => (fill ? Color.fromCssColorString(fill) : undefined), [fill]);
+  const markerColorValue = useMemo(
+    () => (markerColor ? Color.fromCssColorString(markerColor) : undefined),
+    [markerColor],
+  );
+
+  useEffect(() => {
+    if (!viewer) return;
+    cachedFeatures.current.forEach(f => {
+      attachStyle(f.raw, layer, evalFeature, viewer.clock.currentTime);
+    });
+  }, [layer, viewer]);
+
+  useEffect(
+    () => () => {
+      requestIdleCallbackWithRequiredWork(() => {
+        onComputedFeatureDelete?.(Array.from(cachedFeatureIds.current.values()));
+      });
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  if (!isVisible || !show || !Component || !url) return null;
+
+  return (
+    <Component
+      data={url}
+      show={true}
+      clampToGround={clampToGround}
+      onChange={handleChange}
+      onLoad={handleLoad}
+      stroke={strokeValue}
+      fill={fillValue}
+      strokeWidth={strokeWidth}
+      markerSize={markerSize}
+      markerColor={markerColorValue}
+    />
+  );
+}
+
+export const config: FeatureComponentConfig = {
+  noFeature: true,
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Resource/utils.test.ts b/web/src/beta/core/engines/Cesium/Feature/Resource/utils.test.ts
new file mode 100644
index 0000000000..35b5875687
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Resource/utils.test.ts
@@ -0,0 +1,69 @@
+import { expect, test } from "vitest";
+
+import { heightReference, shadowMode } from "../../common";
+import { toColor } from "../utils";
+
+import { attachProperties } from "./utils";
+
+test("attachProperties()", () => {
+  const mockEntity: any = {
+    polygon: {
+      outlineWidth: 100,
+      material: toColor("blue"),
+    },
+  };
+  const mockComputedFeature: any = {
+    polygon: {
+      fillColor: "red",
+      shadows: "enabled",
+      heightReference: "clamp",
+      outlineColor: "red",
+    },
+  };
+
+  attachProperties(mockEntity, mockComputedFeature, ["polygon", "polygon"], {
+    material: {
+      name: "fillColor",
+      type: "color",
+    },
+    outlineWidth: {
+      name: "strokeWidth",
+    },
+    shadows: {
+      name: "shadows",
+      type: "shadows",
+    },
+    heightReference: {
+      name: "heightReference",
+      type: "heightReference",
+    },
+    outlineColor: {
+      name: "strokeColor",
+      override: "blue",
+    },
+  });
+
+  expect(mockEntity.polygon).toEqual({
+    material: toColor("red"),
+    shadows: shadowMode("enabled"),
+    heightReference: heightReference("clamp"),
+    outlineWidth: 100,
+    outlineColor: "blue",
+  });
+  expect(mockEntity.properties.reearth_originalProperties).toEqual({
+    polygon: {
+      material: toColor("blue"),
+      outlineWidth: 100,
+    },
+  });
+
+  // Computed feature should not be changed.
+  expect(mockComputedFeature).toEqual({
+    polygon: {
+      fillColor: "red",
+      shadows: "enabled",
+      heightReference: "clamp",
+      outlineColor: "red",
+    },
+  });
+});
diff --git a/web/src/beta/core/engines/Cesium/Feature/Resource/utils.ts b/web/src/beta/core/engines/Cesium/Feature/Resource/utils.ts
new file mode 100644
index 0000000000..be315bd0c0
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Resource/utils.ts
@@ -0,0 +1,368 @@
+import {
+  JulianDate,
+  Entity,
+  Cartesian3,
+  PolygonHierarchy,
+  PointGraphics,
+  BillboardGraphics,
+} from "cesium";
+
+import {
+  AppearanceTypes,
+  ComputedFeature,
+  ComputedLayer,
+  Feature,
+} from "@reearth/beta/core/mantle";
+import { EvalFeature } from "@reearth/beta/core/Map";
+
+import { heightReference, shadowMode, toColor } from "../../common";
+import { attachTag, extractSimpleLayer, getTag, Tag } from "../utils";
+
+export function overrideOriginalProperties(
+  entity: Entity,
+  tag: Tag | undefined,
+  name: string,
+  properties: any,
+) {
+  const originalProperties = tag?.originalProperties || {};
+  attachTag(entity, {
+    ...(tag || {}),
+    originalProperties: {
+      ...originalProperties,
+      [name]: {
+        ...originalProperties[name],
+        ...properties,
+      },
+    },
+  });
+}
+
+type CesiumEntityAppearanceKey = "polygon" | "polyline";
+type SupportedAppearanceKey = "marker" | keyof Pick<Entity, CesiumEntityAppearanceKey>;
+
+type EntityAppearanceKey<AName extends SupportedAppearanceKey> = AName extends "marker"
+  ? keyof Pick<Entity, "point" | "billboard" | "label">
+  : keyof Pick<Entity, CesiumEntityAppearanceKey>;
+
+type AppearancePropertyKeyType = "color" | "heightReference" | "shadows";
+
+export function attachProperties<
+  AName extends SupportedAppearanceKey,
+  PName extends EntityAppearanceKey<AName>,
+>(
+  entity: Entity,
+  computedFeature: ComputedFeature | undefined,
+  namePair: [appearanceName: AName, propertyName: PName],
+  propertyMap: {
+    [K in keyof Exclude<Entity[PName], undefined>]?: {
+      name: keyof AppearanceTypes[AName];
+      type?: AppearancePropertyKeyType;
+      override?: any;
+      default?: any;
+    };
+  },
+) {
+  const [appearanceName, propertyName] = namePair;
+  const property = entity[propertyName] ?? {};
+  if (!entity[propertyName]) {
+    return;
+  }
+
+  const tag = getTag(entity);
+
+  // Backup original properties
+  overrideOriginalProperties(
+    entity,
+    tag,
+    propertyName,
+    Object.keys(propertyMap).reduce((r, k) => {
+      r[k] = (property as any)[k];
+      return r;
+    }, {} as Record<string, any>),
+  );
+
+  Object.entries(propertyMap).forEach(([entityPropertyKey, appearancePropertyKey]) => {
+    const appearanceKeyName = appearancePropertyKey.name;
+    const appearanceKeyType = appearancePropertyKey.type as AppearancePropertyKeyType;
+
+    let value =
+      appearancePropertyKey.override ??
+      (computedFeature?.[appearanceName] as any)?.[appearanceKeyName] ??
+      appearancePropertyKey.default;
+    switch (appearanceKeyType) {
+      case "color":
+        value = toColor(value);
+        break;
+      case "shadows":
+        value = shadowMode(value);
+        break;
+      case "heightReference":
+        value = heightReference(value);
+    }
+
+    (entity[propertyName] as any)[entityPropertyKey] =
+      value ?? (property as any)[entityPropertyKey];
+  });
+}
+
+const hasAppearance = <
+  AName extends SupportedAppearanceKey,
+  PName extends EntityAppearanceKey<AName>,
+>(
+  layer: ComputedLayer | undefined,
+  entity: Entity,
+  namePair: [appearanceName: AName, propertyName: PName],
+): boolean => {
+  return !!(extractSimpleLayer(layer)?.[namePair[0]] || entity[namePair[1]]);
+};
+
+export const attachStyle = (
+  entity: Entity,
+  layer: ComputedLayer | undefined,
+  evalFeature: EvalFeature,
+  currentTime: JulianDate,
+): [Feature, ComputedFeature] | void => {
+  if (!layer) {
+    return;
+  }
+
+  // TODO: make it DRY
+  const point = hasAppearance(layer, entity, ["marker", "point"]);
+  const billboard = hasAppearance(layer, entity, ["marker", "billboard"]);
+  const label = hasAppearance(layer, entity, ["marker", "label"]);
+  if (point || billboard || label) {
+    const position = entity.position?.getValue(currentTime);
+    const coordinates = [position?.x ?? 0, position?.y ?? 0, position?.z ?? 0];
+    const feature: Feature = {
+      type: "feature",
+      id: String(entity.id),
+      geometry: {
+        type: "Point",
+        coordinates,
+      },
+      properties: entity.properties?.getValue(currentTime) || {},
+      range: {
+        x: coordinates[0],
+        y: coordinates[1],
+        z: coordinates[2],
+      },
+    };
+    const computedFeature = evalFeature(layer.layer, feature);
+    if (!computedFeature) {
+      return;
+    }
+    if (point) {
+      const isPointStyle = computedFeature?.marker?.style === "point";
+      if (isPointStyle && !entity.point) {
+        entity.point = new PointGraphics();
+        entity.billboard = undefined;
+      }
+
+      attachProperties(entity, computedFeature, ["marker", "point"], {
+        show: {
+          name: "show",
+          ...(computedFeature?.marker?.style
+            ? {
+                override:
+                  computedFeature?.marker?.style === "point" &&
+                  (computedFeature?.marker.show ?? true),
+              }
+            : {}),
+        },
+        pixelSize: {
+          name: "pointSize",
+        },
+        color: {
+          name: "pointColor",
+          type: "color",
+        },
+        outlineColor: {
+          name: "pointOutlineColor",
+          type: "color",
+        },
+        outlineWidth: {
+          name: "pointOutlineWidth",
+        },
+        heightReference: {
+          name: "heightReference",
+          type: "heightReference",
+        },
+      });
+    }
+
+    if (billboard) {
+      const isImageStyle = computedFeature?.marker?.style === "image";
+      if (isImageStyle && !entity.billboard) {
+        entity.billboard = new BillboardGraphics();
+        entity.point = undefined;
+      }
+
+      attachProperties(entity, computedFeature, ["marker", "billboard"], {
+        show: {
+          name: "show",
+          ...(computedFeature?.marker?.style
+            ? {
+                override:
+                  computedFeature?.marker?.style === "image" &&
+                  (computedFeature?.marker.show ?? true),
+              }
+            : {}),
+        },
+        image: {
+          name: "image",
+        },
+        color: {
+          name: "imageColor",
+          type: "color",
+        },
+        scale: {
+          name: "imageSize",
+        },
+        sizeInMeters: {
+          name: "imageSizeInMeters",
+        },
+        heightReference: {
+          name: "heightReference",
+          type: "heightReference",
+        },
+        horizontalOrigin: {
+          name: "imageHorizontalOrigin",
+        },
+        verticalOrigin: {
+          name: "imageVerticalOrigin",
+        },
+      });
+
+      if (label) {
+        attachProperties(entity, computedFeature, ["marker", "label"], {
+          show: {
+            name: "show",
+            default: true,
+          },
+          text: {
+            name: "labelText",
+          },
+          backgroundColor: {
+            name: "labelBackground",
+            type: "color",
+          },
+          heightReference: {
+            name: "heightReference",
+            type: "heightReference",
+          },
+        });
+      }
+    }
+    return [feature, computedFeature];
+  }
+
+  if (hasAppearance(layer, entity, ["polyline", "polyline"])) {
+    const entityPosition = entity.position?.getValue(currentTime);
+    const positions = entity.polyline?.positions?.getValue(currentTime) as Cartesian3[];
+    const coordinates = positions?.map(position => [
+      position?.x ?? 0,
+      position?.y ?? 0,
+      position?.z ?? 0,
+    ]);
+    const feature: Feature = {
+      type: "feature",
+      id: String(entity.id),
+      geometry: {
+        type: "LineString",
+        coordinates,
+      },
+      properties: entity.properties?.getValue(currentTime) || {},
+      range: {
+        x: entityPosition?.x ?? 0,
+        y: entityPosition?.y ?? 0,
+        z: entityPosition?.z ?? 0,
+      },
+    };
+    const computedFeature = evalFeature(layer.layer, feature);
+    if (!computedFeature) {
+      return;
+    }
+    attachProperties(entity, computedFeature, ["polyline", "polyline"], {
+      show: {
+        name: "show",
+        default: true,
+      },
+      width: {
+        name: "strokeWidth",
+      },
+      material: {
+        name: "strokeColor",
+        type: "color",
+      },
+      shadows: {
+        name: "shadows",
+        type: "shadows",
+      },
+      clampToGround: {
+        name: "clampToGround",
+      },
+    });
+    return [feature, computedFeature];
+  }
+
+  if (hasAppearance(layer, entity, ["polygon", "polygon"])) {
+    const entityPosition = entity.position?.getValue(currentTime);
+    const hierarchy = entity.polygon?.hierarchy?.getValue(currentTime) as PolygonHierarchy;
+    const coordinates = hierarchy?.holes?.map(hole =>
+      hole.positions.map(position => [position?.x ?? 0, position?.y ?? 0, position?.z ?? 0]),
+    );
+    const feature: Feature = {
+      type: "feature",
+      id: String(entity.id),
+      geometry: {
+        type: "Polygon",
+        coordinates,
+      },
+      properties: entity.properties?.getValue(currentTime) || {},
+      range: {
+        x: entityPosition?.x ?? 0,
+        y: entityPosition?.y ?? 0,
+        z: entityPosition?.z ?? 0,
+      },
+    };
+    const computedFeature = evalFeature(layer.layer, feature);
+    if (!computedFeature) {
+      return;
+    }
+    attachProperties(entity, computedFeature, ["polygon", "polygon"], {
+      show: {
+        name: "show",
+        default: true,
+      },
+      fill: {
+        name: "fill",
+      },
+      material: {
+        name: "fillColor",
+        type: "color",
+      },
+      outline: {
+        name: "stroke",
+      },
+      outlineColor: {
+        name: "strokeColor",
+        type: "color",
+      },
+      outlineWidth: {
+        name: "strokeWidth",
+      },
+      shadows: {
+        name: "shadows",
+        type: "shadows",
+      },
+      heightReference: {
+        name: "heightReference",
+        type: "heightReference",
+      },
+      extrudedHeight: {
+        name: "extrudedHeight",
+      },
+    });
+    return [feature, computedFeature];
+  }
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Tileset/hooks.ts b/web/src/beta/core/engines/Cesium/Feature/Tileset/hooks.ts
new file mode 100644
index 0000000000..d2d4d9e2f5
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Tileset/hooks.ts
@@ -0,0 +1,526 @@
+import {
+  Cesium3DTileset as Cesium3DTilesetType,
+  Cesium3DTileStyle,
+  IonResource,
+  ClippingPlane,
+  ClippingPlaneCollection as CesiumClippingPlaneCollection,
+  Cartesian3,
+  Matrix4,
+  Transforms,
+  TranslationRotationScale,
+  HeadingPitchRoll,
+  Matrix3,
+  Cesium3DTileset,
+  Cesium3DTile,
+  Cesium3DTileFeature,
+  Model,
+  Cesium3DTilePointFeature,
+} from "cesium";
+import { isEqual, pick } from "lodash-es";
+import { MutableRefObject, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { CesiumComponentRef, useCesium } from "resium";
+
+import type {
+  ComputedFeature,
+  ComputedLayer,
+  Feature,
+  EvalFeature,
+  SceneProperty,
+  Cesium3DTilesAppearance,
+} from "../../..";
+import { layerIdField, sampleTerrainHeightFromCartesian } from "../../common";
+import type { InternalCesium3DTileFeature } from "../../types";
+import { lookupFeatures, translationWithClamping } from "../../utils";
+import {
+  usePick,
+  attachTag,
+  extractSimpleLayer,
+  extractSimpleLayerData,
+  generateIDWithMD5,
+  toColor,
+} from "../utils";
+
+import { useClippingBox } from "./useClippingBox";
+
+import { Property } from ".";
+
+const useData = (layer: ComputedLayer | undefined) => {
+  return useMemo(() => {
+    const data = extractSimpleLayerData(layer);
+    return {
+      type: data?.type,
+      url: data?.url,
+      layers: data?.layers
+        ? Array.isArray(data.layers)
+          ? data.layers.join(",")
+          : data?.layers
+        : undefined,
+    };
+  }, [layer]);
+};
+
+const makeFeatureFrom3DTile = (
+  id: string,
+  feature: InternalCesium3DTileFeature,
+  coordinates: number[],
+): Feature => {
+  const properties =
+    feature instanceof Model
+      ? {}
+      : Object.fromEntries(feature.getPropertyIds().map(id => [id, feature.getProperty(id)]));
+  return {
+    type: "feature",
+    id,
+    geometry: {
+      type: "Point",
+      coordinates,
+    },
+    properties,
+    range: {
+      x: coordinates[0],
+      y: coordinates[1],
+      z: coordinates[2],
+    },
+  };
+};
+
+const getBuiltinFeatureId = (f: InternalCesium3DTileFeature) => {
+  return (f instanceof Model ? f.id : f instanceof Cesium3DTileFeature ? f.featureId : "") ?? "";
+};
+
+type CachedFeature = {
+  feature: Feature;
+  raw: InternalCesium3DTileFeature;
+};
+
+const MAX_NUMBER_OF_CONCURRENT_COMPUTING_FEATURES = 5000;
+
+type StyleProperty<N = string> = {
+  name: N;
+  convert?: "color" | "colorFunctionString" | "vec2" | "vec4";
+};
+
+const COMMON_STYLE_PROPERTIES: StyleProperty<"color" | "show">[] = [
+  { name: "color", convert: "color" },
+  { name: "show" },
+];
+const MODEL_STYLE_PROPERTIES: StyleProperty<"color" | "show" | "pointSize" | "meta">[] = [
+  { name: "color", convert: "colorFunctionString" },
+  { name: "show" },
+  { name: "pointSize" },
+  { name: "meta" },
+];
+// TODO: Add more styles. And it has not been tested yet.
+const POINT_STYLE_PROPERTIES: StyleProperty<"pointSize">[] = [{ name: "pointSize" }];
+
+const TILESET_APPEARANCE_FIELDS: (keyof Cesium3DTilesAppearance)[] = [
+  "show",
+  "color",
+  "pointSize",
+  "meta",
+];
+
+// TODO: Implement other convert type
+const convertStyle = (val: any, convert: StyleProperty["convert"]) => {
+  if (convert === "color") {
+    return toColor(val);
+  } else if (convert === "colorFunctionString") {
+    return val === undefined ? val : `color("${val}")`;
+  }
+
+  return val;
+};
+
+const useFeature = ({
+  id,
+  tileset,
+  layer,
+  evalFeature,
+}: {
+  id?: string;
+  tileset: MutableRefObject<Cesium3DTileset | undefined>;
+  layer?: ComputedLayer;
+  evalFeature: EvalFeature;
+}) => {
+  const cachedFeaturesRef = useRef<CachedFeature[]>([]);
+  const cachedCalculatedLayerRef = useRef(layer);
+  const cachedFeatureIds = useRef(new Set<string>());
+  const layerId = layer?.id || id;
+
+  const attachComputedFeature = useCallback(
+    async (feature?: CachedFeature) => {
+      const layer = cachedCalculatedLayerRef?.current?.layer;
+      if (layer?.type === "simple" && feature?.feature) {
+        const computedFeature = evalFeature(layer, feature?.feature);
+
+        const style = computedFeature?.["3dtiles"];
+
+        const raw = feature.raw;
+
+        COMMON_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+          const val = convertStyle(style?.[name], convert);
+          if (val !== undefined) {
+            raw[name] = val;
+          }
+        });
+
+        if (raw instanceof Cesium3DTilePointFeature) {
+          POINT_STYLE_PROPERTIES.forEach(({ name, convert }) => {
+            const val = convertStyle(style?.[name], convert);
+            if (val !== undefined) {
+              raw[name] = val;
+            }
+          });
+        }
+
+        if ("style" in raw) {
+          raw.style = new Cesium3DTileStyle(
+            // TODO: Convert value if it's necessary
+            MODEL_STYLE_PROPERTIES.reduce((res, { name, convert }) => {
+              const val = convertStyle(style?.[name as keyof typeof style], convert);
+              if (val === undefined) return res;
+              return { ...res, [name]: val };
+            }, {}),
+          );
+        }
+
+        attachTag(feature.raw, { layerId, featureId: feature.feature.id, computedFeature });
+
+        return computedFeature;
+      }
+      return;
+    },
+    [evalFeature, layerId],
+  );
+
+  useEffect(() => {
+    tileset.current?.tileLoad.addEventListener((t: Cesium3DTile) => {
+      lookupFeatures(t.content, async (tileFeature, content) => {
+        const coordinates = content.tile.boundingSphere.center;
+        const featureId = getBuiltinFeatureId(tileFeature);
+        const id = generateIDWithMD5(
+          `${coordinates.x}-${coordinates.y}-${coordinates.z}-${featureId}`,
+        );
+        const feature = (() => {
+          const normalFeature = makeFeatureFrom3DTile(id, tileFeature, [
+            coordinates.x,
+            coordinates.y,
+            coordinates.z,
+          ]);
+          const feature: CachedFeature = {
+            feature: normalFeature,
+            raw: tileFeature,
+          };
+          cachedFeaturesRef.current.push(feature);
+          cachedFeatureIds.current.add(id);
+          return feature;
+        })();
+
+        await attachComputedFeature(feature);
+      });
+    });
+  }, [tileset, cachedFeaturesRef, attachComputedFeature, layerId]);
+
+  useEffect(() => {
+    cachedCalculatedLayerRef.current = layer;
+  }, [layer]);
+
+  // Update 3dtiles styles
+  const tileAppearance = useMemo(() => extractSimpleLayer(layer)?.["3dtiles"], [layer]);
+  const pickedAppearance = usePick(tileAppearance, TILESET_APPEARANCE_FIELDS);
+
+  // If styles are updated while features are calculating,
+  // we stop calculating features, and reassign styles.
+  const skippedComputingAt = useRef<number | null>();
+  useEffect(() => {
+    skippedComputingAt.current = Date.now();
+  }, [pickedAppearance]);
+
+  const computeFeatureAsync = useCallback(
+    async (f: CachedFeature, startedComputingAt: number) =>
+      new Promise(resolve =>
+        requestAnimationFrame(() => {
+          if (skippedComputingAt.current && skippedComputingAt.current > startedComputingAt) {
+            resolve(undefined);
+            return;
+          }
+
+          const pickedProperties = pick(f.feature.properties, TILESET_APPEARANCE_FIELDS);
+          if (pickedAppearance && !isEqual(pickedProperties, pickedAppearance)) {
+            Object.entries(pickedAppearance).forEach(([k, v]) => {
+              f.feature.properties[k] = v;
+            });
+            attachComputedFeature(f);
+          }
+          resolve(undefined);
+        }),
+      ),
+    [pickedAppearance, attachComputedFeature],
+  );
+
+  const computeFeatures = useCallback(
+    async (startedComputingAt: number) => {
+      const tempAsyncProcesses: Promise<unknown>[] = [];
+      let skipped = false;
+      for (const f of cachedFeaturesRef.current) {
+        if (skippedComputingAt.current && skippedComputingAt.current > startedComputingAt) {
+          skipped = true;
+          break;
+        }
+
+        tempAsyncProcesses.push(computeFeatureAsync(f, startedComputingAt));
+
+        if (tempAsyncProcesses.length > MAX_NUMBER_OF_CONCURRENT_COMPUTING_FEATURES) {
+          await Promise.all(tempAsyncProcesses);
+          tempAsyncProcesses.length = 0;
+        }
+      }
+      if (!skipped) {
+        await Promise.all(tempAsyncProcesses);
+      }
+      tempAsyncProcesses.length = 0;
+    },
+    [computeFeatureAsync],
+  );
+
+  useEffect(() => {
+    const compute = async () => {
+      const startedComputingAt = Date.now();
+      await computeFeatures(startedComputingAt);
+    };
+    compute();
+  }, [computeFeatures]);
+};
+
+export const useHooks = ({
+  id,
+  boxId,
+  isVisible,
+  property,
+  layer,
+  feature,
+  meta,
+  evalFeature,
+}: {
+  id: string;
+  boxId: string;
+  isVisible?: boolean;
+  property?: Property;
+  sceneProperty?: SceneProperty;
+  layer?: ComputedLayer;
+  feature?: ComputedFeature;
+  meta?: Record<string, unknown>;
+  evalFeature: EvalFeature;
+}) => {
+  const { viewer } = useCesium();
+  const { tileset, styleUrl, edgeColor, edgeWidth, experimental_clipping } = property ?? {};
+  const {
+    width,
+    height,
+    length,
+    location,
+    coordinates,
+    heading,
+    roll,
+    pitch,
+    planes: _planes,
+    visible: clippingVisible = true,
+    direction = "inside",
+    builtinBoxProps,
+    allowEnterGround,
+  } = useClippingBox({ clipping: experimental_clipping, boxId });
+  const [style, setStyle] = useState<Cesium3DTileStyle>();
+  const { url, type } = useData(layer);
+
+  const prevPlanes = useRef(_planes);
+  const planes = useMemo(() => {
+    if (
+      !prevPlanes.current?.length ||
+      !prevPlanes.current?.every(
+        (p, i) =>
+          p.normal?.x === _planes?.[i].normal?.x &&
+          p.normal?.y === _planes?.[i].normal?.y &&
+          p.normal?.z === _planes?.[i].normal?.z &&
+          p.distance === _planes?.[i].distance,
+      )
+    ) {
+      prevPlanes.current = _planes;
+    }
+    return prevPlanes.current;
+  }, [_planes]);
+  const clipDirection = direction === "inside" ? -1 : 1;
+  // Create immutable object
+  const [clippingPlanes] = useState(
+    () =>
+      new CesiumClippingPlaneCollection({
+        planes: planes?.map(
+          plane =>
+            new ClippingPlane(
+              new Cartesian3(plane.normal?.x, plane.normal?.y, plane.normal?.z),
+              (plane.distance || 0) * clipDirection,
+            ),
+        ),
+        unionClippingRegions: direction === "outside",
+        edgeWidth: edgeWidth,
+        edgeColor: toColor(edgeColor),
+      }),
+  );
+  const tilesetRef = useRef<Cesium3DTilesetType>();
+
+  const ref = useCallback(
+    (tileset: CesiumComponentRef<Cesium3DTilesetType> | null) => {
+      if (tileset?.cesiumElement) {
+        attachTag(tileset.cesiumElement, { layerId: layer?.id || id, featureId: feature?.id });
+      }
+      if (layer?.id && tileset?.cesiumElement) {
+        (tileset?.cesiumElement as any)[layerIdField] = layer.id;
+      }
+      tilesetRef.current = tileset?.cesiumElement;
+    },
+    [id, layer?.id, feature?.id],
+  );
+
+  useFeature({
+    id,
+    tileset: tilesetRef,
+    layer,
+    evalFeature,
+  });
+
+  const [terrainHeightEstimate, setTerrainHeightEstimate] = useState(0);
+  const inProgressSamplingTerrainHeight = useRef(false);
+  const updateTerrainHeight = useCallback(
+    (translation: Cartesian3) => {
+      if (inProgressSamplingTerrainHeight.current || !viewer) {
+        return;
+      }
+
+      if (!allowEnterGround) {
+        inProgressSamplingTerrainHeight.current = true;
+        sampleTerrainHeightFromCartesian(viewer.scene, translation).then(v => {
+          setTerrainHeightEstimate(v ?? 0);
+          inProgressSamplingTerrainHeight.current = false;
+        });
+      }
+    },
+    [allowEnterGround, viewer],
+  );
+
+  useEffect(() => {
+    const coords = coordinates
+      ? coordinates
+      : location
+      ? [location.lng, location.lat, location.height ?? 0]
+      : undefined;
+    const position = Cartesian3.fromDegrees(coords?.[0] || 0, coords?.[1] || 0, coords?.[2] || 0);
+
+    const prepareClippingPlanes = async () => {
+      if (!tilesetRef.current) {
+        return;
+      }
+
+      try {
+        await tilesetRef.current?.readyPromise;
+      } catch (e) {
+        console.error("Could not load 3D tiles: ", e);
+        return;
+      }
+
+      // Use internal original matrix for clipping planes.
+      const clippingPlanesOriginMatrix = (
+        tilesetRef.current as any
+      ).clippingPlanesOriginMatrix.clone();
+
+      const dimensions = new Cartesian3(width || 100, length || 100, height || 100);
+
+      if (!allowEnterGround) {
+        const trs = new TranslationRotationScale(position, undefined, dimensions);
+        translationWithClamping(trs, !!allowEnterGround, terrainHeightEstimate);
+        position.x = trs.translation.x;
+        position.y = trs.translation.y;
+        position.z = trs.translation.z;
+      }
+
+      const hpr = heading && pitch && roll ? new HeadingPitchRoll(heading, pitch, roll) : undefined;
+      const boxTransform = Matrix4.multiply(
+        hpr
+          ? Matrix4.fromRotationTranslation(Matrix3.fromHeadingPitchRoll(hpr), position)
+          : Transforms.eastNorthUpToFixedFrame(position),
+        Matrix4.fromScale(dimensions, new Matrix4()),
+        new Matrix4(),
+      );
+
+      const inverseOriginalModelMatrix = Matrix4.inverse(clippingPlanesOriginMatrix, new Matrix4());
+
+      Matrix4.multiply(inverseOriginalModelMatrix, boxTransform, clippingPlanes.modelMatrix);
+    };
+
+    prepareClippingPlanes();
+    if (!allowEnterGround) {
+      updateTerrainHeight(position);
+    }
+  }, [
+    width,
+    length,
+    height,
+    heading,
+    pitch,
+    roll,
+    location,
+    coordinates,
+    clippingPlanes.modelMatrix,
+    updateTerrainHeight,
+    allowEnterGround,
+    terrainHeightEstimate,
+  ]);
+
+  useEffect(() => {
+    clippingPlanes.enabled = clippingVisible;
+  }, [clippingPlanes, clippingVisible]);
+
+  useEffect(() => {
+    clippingPlanes.unionClippingRegions = direction === "outside";
+  }, [clippingPlanes, direction]);
+
+  useEffect(() => {
+    clippingPlanes.removeAll();
+    planes?.forEach(plane =>
+      clippingPlanes.add(
+        new ClippingPlane(
+          new Cartesian3(plane.normal?.x, plane.normal?.y, plane.normal?.z),
+          (plane.distance || 0) * clipDirection,
+        ),
+      ),
+    );
+  }, [planes, clippingPlanes, clipDirection]);
+
+  useEffect(() => {
+    if (!styleUrl) {
+      setStyle(undefined);
+      return;
+    }
+    (async () => {
+      const res = await fetch(styleUrl);
+      if (!res.ok) return;
+      setStyle(new Cesium3DTileStyle(await res.json()));
+    })();
+  }, [styleUrl]);
+
+  const tilesetUrl = useMemo(() => {
+    return type === "osm-buildings" && isVisible
+      ? IonResource.fromAssetId(96188, {
+          accessToken: meta?.cesiumIonAccessToken as string | undefined,
+        }) // https://github.com/CesiumGS/cesium/blob/main/packages/engine/Source/Scene/createOsmBuildings.js#L53
+      : type === "3dtiles" && isVisible
+      ? url ?? tileset
+      : null;
+  }, [isVisible, tileset, url, type, meta]);
+
+  return {
+    tilesetUrl,
+    ref,
+    style,
+    clippingPlanes,
+    builtinBoxProps,
+  };
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Tileset/index.stories.tsx b/web/src/beta/core/engines/Cesium/Feature/Tileset/index.stories.tsx
new file mode 100644
index 0000000000..885516c591
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Tileset/index.stories.tsx
@@ -0,0 +1,41 @@
+import { Meta, Story } from "@storybook/react";
+
+import { engine } from "../..";
+import Component, { Props } from "../../../../Map";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const Default = Template.bind([]);
+Default.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "3dtiles",
+        url: `https://example.com/3dtiles.json`, // You need to set URL.
+      },
+      ["3dtiles"]: {
+        color: "red",
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Tileset/index.tsx b/web/src/beta/core/engines/Cesium/Feature/Tileset/index.tsx
new file mode 100644
index 0000000000..b7a1315f7e
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Tileset/index.tsx
@@ -0,0 +1,91 @@
+import { memo, useMemo } from "react";
+import { Cesium3DTileset } from "resium";
+
+import type { Cesium3DTilesAppearance, ComputedLayer } from "../../..";
+import { colorBlendModeFor3DTile, shadowMode } from "../../common";
+import Box from "../Box";
+import { type FeatureComponentConfig, type FeatureProps } from "../utils";
+
+import { useHooks } from "./hooks";
+
+export type Props = FeatureProps<Property>;
+
+export type Property = Cesium3DTilesAppearance;
+
+function Tileset({
+  id,
+  isVisible,
+  property,
+  layer,
+  feature,
+  sceneProperty,
+  meta,
+  evalFeature,
+  ...props
+}: Props): JSX.Element | null {
+  const { shadows, colorBlendMode } = property ?? {};
+  const boxId = `${layer?.id}_box`;
+  const { tilesetUrl, ref, style, clippingPlanes, builtinBoxProps } = useHooks({
+    id,
+    boxId,
+    isVisible,
+    layer,
+    feature,
+    property,
+    meta,
+    evalFeature,
+  });
+  const boxProperty = useMemo(
+    () => ({
+      ...(layer?.layer?.type === "simple" ? layer?.layer?.box : {}),
+      ...(builtinBoxProps?.property || {}),
+    }),
+    [layer?.layer, builtinBoxProps?.property],
+  );
+  const boxLayer = useMemo(() => ({ ...layer, id: boxId }), [layer, boxId]);
+
+  return !isVisible || !tilesetUrl ? null : (
+    <>
+      <Cesium3DTileset
+        ref={ref}
+        url={tilesetUrl}
+        style={style}
+        shadows={shadowMode(shadows)}
+        clippingPlanes={clippingPlanes}
+        colorBlendMode={colorBlendModeFor3DTile(colorBlendMode)}
+      />
+      {builtinBoxProps && (
+        <Box
+          {...props}
+          id={boxId}
+          sceneProperty={sceneProperty}
+          property={boxProperty as any}
+          geometry={builtinBoxProps.geometry}
+          feature={feature}
+          layer={boxLayer as ComputedLayer}
+          isVisible={builtinBoxProps.visible}
+          evalFeature={evalFeature}
+          onLayerEdit={builtinBoxProps.handleLayerEdit}
+        />
+      )}
+    </>
+  );
+}
+
+export default memo(
+  Tileset,
+  (prev, next) =>
+    prev.id === next.id &&
+    prev.isVisible === next.isVisible &&
+    prev.property === next.property &&
+    prev.layer?.layer === next.layer?.layer &&
+    prev.sceneProperty === next.sceneProperty &&
+    prev.meta === next.meta &&
+    prev.evalFeature === next.evalFeature &&
+    prev.onComputedFeatureFetch === next.onComputedFeatureFetch &&
+    prev.onFeatureDelete === next.onFeatureDelete,
+);
+
+export const config: FeatureComponentConfig = {
+  noFeature: true,
+};
diff --git a/web/src/beta/core/engines/Cesium/Feature/Tileset/useClippingBox.ts b/web/src/beta/core/engines/Cesium/Feature/Tileset/useClippingBox.ts
new file mode 100644
index 0000000000..4d5b80f326
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/Tileset/useClippingBox.ts
@@ -0,0 +1,450 @@
+import {
+  ScreenSpaceEventType,
+  ScreenSpaceEventHandler,
+  Cartesian2,
+  Cartesian3,
+  Entity,
+  Cesium3DTileFeature,
+} from "cesium";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { RootEventTarget, useCesium } from "resium";
+
+import { Camera, EXPERIMENTAL_clipping } from "@reearth/beta/core/mantle";
+import { LayerEditEvent } from "@reearth/beta/core/Map";
+
+import {
+  getCamera,
+  getLocationFromScreen,
+  sampleTerrainHeight,
+  updateMapController,
+} from "../../common";
+import { computeMoveAmount } from "../Box/utils";
+import { getTag } from "../utils";
+
+type BoxState = {
+  activeBox?: boolean;
+  activeScalePointIndex?: number; // 0 ~ 11
+  isScalePointClicked?: boolean;
+  activeEdgeIndex?: number; // 0 ~ 4
+  isEdgeClicked?: boolean;
+  cursor?: string;
+};
+
+export const BUILTIN_BOX_SIDE_PLANES = [
+  {
+    normal: {
+      x: 0,
+      y: 0,
+      z: 1,
+    },
+    distance: 0.5,
+  },
+  {
+    normal: {
+      x: 0,
+      y: 0,
+      z: -1,
+    },
+    distance: 0.5,
+  },
+  {
+    normal: {
+      x: 0,
+      y: 1,
+      z: 0,
+    },
+    distance: 0.5,
+  },
+  {
+    normal: {
+      x: 0,
+      y: -1,
+      z: 0,
+    },
+    distance: 0.5,
+  },
+  {
+    normal: {
+      x: 1,
+      y: 0,
+      z: 0,
+    },
+    distance: 0.5,
+  },
+  {
+    normal: {
+      x: -1,
+      y: 0,
+      z: 0,
+    },
+    distance: 0.5,
+  },
+];
+
+export const useClippingBox = ({
+  clipping,
+  boxId,
+}: {
+  clipping?: EXPERIMENTAL_clipping;
+  boxId: string;
+}) => {
+  const {
+    useBuiltinBox,
+    visible,
+    allowEnterGround,
+    coordinates,
+    width,
+    height,
+    length,
+    heading,
+    pitch,
+    roll,
+  } = clipping || {};
+
+  const { viewer } = useCesium();
+
+  const isBoxClicked = useRef(false);
+  const isTopBottomSidePlaneClicked = useRef(false);
+  const currentCameraPosition = useRef<Camera | undefined>();
+
+  // Coordinates
+  const [coords, setCoords] = useState(coordinates);
+  useEffect(() => {
+    if (useBuiltinBox && !coords) {
+      setCoords(coordinates);
+    }
+  }, [coords, coordinates, useBuiltinBox]);
+
+  // Dimensions
+  const [dimensions, setDimensions] = useState<
+    Pick<EXPERIMENTAL_clipping, "width" | "height" | "length" | "heading" | "pitch" | "roll">
+  >({ width, height, length, heading, pitch, roll });
+  useEffect(() => {
+    if (useBuiltinBox && !dimensions) {
+      setDimensions({ width, height, length, heading, pitch, roll });
+    }
+  }, [dimensions, width, height, length, heading, pitch, roll, useBuiltinBox]);
+
+  const [boxState, setBoxState] = useState<BoxState>({
+    activeBox: false,
+    activeScalePointIndex: undefined, // 0 ~ 11
+    isScalePointClicked: false,
+    activeEdgeIndex: undefined, // 0 ~ 4
+    isEdgeClicked: false,
+    cursor: "default", // grab | grabbing | default
+  });
+
+  const handleUpdateBoxState = useCallback((state: BoxState) => {
+    setBoxState(v => ({ ...v, ...state }));
+  }, []);
+
+  const handleMouseDown = useCallback(
+    (e: any) => {
+      if (!viewer) {
+        return;
+      }
+      const picked = viewer.scene.pick(e.position);
+      const layerId = getLayerId(picked);
+
+      // Handle scale box
+      if (layerId?.startsWith(`${boxId}-scale-point`)) {
+        const index = Number(layerId.split("-").slice(-1)[0]);
+        handleUpdateBoxState({
+          cursor: "nesw-resize",
+          activeScalePointIndex: index,
+          isScalePointClicked: true,
+        });
+      }
+      // Handle edge
+      if (layerId?.startsWith(`${boxId}-edge-draggable`)) {
+        const index = Number(layerId.split("-").slice(-1)[0]);
+        handleUpdateBoxState({
+          cursor: "grabbing",
+          activeEdgeIndex: index,
+          isEdgeClicked: true,
+        });
+      }
+
+      if (layerId?.startsWith(`${boxId}-plane`)) {
+        isBoxClicked.current = true;
+        isTopBottomSidePlaneClicked.current = layerId.endsWith("top") || layerId.endsWith("bottom");
+      }
+      if (isBoxClicked.current) {
+        const cameraPosition = getCamera(viewer);
+        currentCameraPosition.current = cameraPosition;
+
+        updateMapController(viewer, false);
+
+        if (!boxState.isScalePointClicked || !boxState.isEdgeClicked) {
+          handleUpdateBoxState({
+            cursor: "grabbing",
+            activeBox: true,
+          });
+        }
+      }
+    },
+    [boxId, boxState, handleUpdateBoxState, viewer],
+  );
+  const handleMouseUp = useCallback(() => {
+    if (!viewer) {
+      return;
+    }
+    if (boxState.activeScalePointIndex || boxState.activeEdgeIndex) {
+      handleUpdateBoxState({
+        cursor: "default",
+        // Handle scale box
+        activeScalePointIndex: undefined,
+        isScalePointClicked: false,
+        // Handle edge
+        activeEdgeIndex: undefined,
+        isEdgeClicked: false,
+      });
+    }
+
+    if (isBoxClicked.current) {
+      updateMapController(viewer, true);
+      currentCameraPosition.current = undefined;
+      isBoxClicked.current = false;
+      isTopBottomSidePlaneClicked.current = false;
+
+      boxState.activeBox = false;
+      boxState.cursor = "default";
+      handleUpdateBoxState({
+        activeBox: false,
+        cursor: "default",
+      });
+    }
+  }, [boxState, handleUpdateBoxState, viewer]);
+  const handleMouseMove = useCallback(
+    async (e: any) => {
+      if (!isBoxClicked.current || !viewer) return;
+
+      const cart = Cartesian3.fromDegrees(coords?.[0] || 0, coords?.[1] || 0, coords?.[2]);
+
+      if (isTopBottomSidePlaneClicked.current) {
+        const locationHeight = coords?.[2] || 0;
+        const terrainHeight = await (async () => {
+          if (!allowEnterGround) {
+            const boxBottomHeight = locationHeight - (dimensions?.height || 0) / 2;
+            const floorHeight =
+              (await sampleTerrainHeight(viewer.scene, coords?.[0] || 0, coords?.[1] || 0)) || 0;
+            if (boxBottomHeight < floorHeight) {
+              return boxBottomHeight + (floorHeight - boxBottomHeight);
+            }
+          }
+          return 0;
+        })();
+
+        const prevMousePosition = new Cartesian2(e.startPosition.x, e.startPosition.y);
+        const currentMousePosition = new Cartesian2(e.endPosition.x, e.endPosition.y);
+
+        const vector = Cartesian2.subtract(
+          currentMousePosition,
+          prevMousePosition,
+          new Cartesian2(),
+        );
+        const direction = new Cartesian3(0, 0, vector.y < 0 ? -1 : 1);
+
+        const { moveAmount } = computeMoveAmount(
+          viewer.scene,
+          {
+            startPosition: prevMousePosition,
+            endPosition: currentMousePosition,
+          },
+          cart,
+          direction,
+        );
+        const moveVector = Cartesian3.multiplyByScalar(direction, moveAmount, new Cartesian3());
+        setCoords(v => [
+          v?.[0] || 0,
+          v?.[1] || 0,
+          (terrainHeight ? terrainHeight : v?.[2] || 0) + moveVector.z,
+        ]);
+      } else {
+        const position = e.endPosition
+          ? getLocationFromScreen(viewer.scene, e.endPosition.x, e.endPosition.y, true)
+          : undefined;
+        setCoords(v => [
+          position?.lng || 0,
+          position?.lat || 0,
+          (!allowEnterGround ? position?.height : undefined) || v?.[2] || 0,
+        ]);
+      }
+    },
+    [allowEnterGround, coords, dimensions?.height, viewer],
+  );
+  const handleMouseEnter = useCallback(
+    ({ layerId }: { layerId?: string } | undefined = {}) => {
+      const enableEnterHandling =
+        !boxState.isScalePointClicked && !boxState.isEdgeClicked && !isBoxClicked.current;
+      // Handle scale box
+      if (layerId?.startsWith(`${boxId}-scale-point`)) {
+        if (enableEnterHandling) {
+          const index = Number(layerId.split("-").slice(-1)[0]);
+          handleUpdateBoxState({
+            cursor: "nesw-resize",
+            activeScalePointIndex: index,
+          });
+        }
+      }
+      // Handle edge
+      if (layerId?.startsWith(`${boxId}-edge-draggable`)) {
+        if (enableEnterHandling) {
+          const index = Number(layerId.split("-").slice(-1)[0]);
+          handleUpdateBoxState({
+            cursor: "grab",
+            activeEdgeIndex: index,
+          });
+        }
+      }
+
+      if (layerId?.startsWith(`${boxId}-plane`)) {
+        if (enableEnterHandling) {
+          handleUpdateBoxState({
+            cursor: "grab",
+            activeBox: true,
+          });
+        }
+      }
+    },
+    [boxId, boxState.isEdgeClicked, boxState.isScalePointClicked, handleUpdateBoxState],
+  );
+
+  const handleMouseLeave = useCallback(
+    ({ layerId }: { layerId?: string } | undefined = {}) => {
+      const enableLeaveHandling =
+        !boxState.isScalePointClicked && !boxState.isEdgeClicked && !isBoxClicked.current;
+      // Handle scale box
+      if (layerId?.startsWith(`${boxId}-scale-point`)) {
+        if (enableLeaveHandling) {
+          handleUpdateBoxState({
+            cursor: "default",
+            activeScalePointIndex: undefined,
+          });
+        }
+      }
+      // Handle edge
+      if (layerId?.startsWith(`${boxId}-edge-draggable`)) {
+        if (enableLeaveHandling) {
+          handleUpdateBoxState({
+            cursor: "default",
+            activeEdgeIndex: undefined,
+          });
+        }
+      }
+
+      if (layerId?.startsWith(`${boxId}-plane`)) {
+        if (enableLeaveHandling) {
+          handleUpdateBoxState({
+            cursor: "default",
+            activeBox: false,
+          });
+        }
+      }
+    },
+    [boxId, boxState.isEdgeClicked, boxState.isScalePointClicked, handleUpdateBoxState],
+  );
+
+  const hovered = useRef<any>();
+  const handleRawMouseMove = useCallback(
+    (e: any) => {
+      const picked = viewer?.scene.pick(e.endPosition);
+
+      if (hovered.current !== picked) {
+        if (hovered.current) {
+          const layerId = getLayerId(hovered.current);
+          handleMouseLeave({ layerId });
+          handleMouseLeave();
+        }
+
+        if (picked) {
+          const layerId = getLayerId(picked);
+          handleMouseEnter({ layerId });
+          handleMouseEnter();
+        }
+      }
+
+      handleMouseMove(e);
+
+      hovered.current = picked;
+    },
+    [handleMouseEnter, handleMouseLeave, handleMouseMove, viewer?.scene],
+  );
+
+  const handleLayerEdit = useCallback(
+    (e: LayerEditEvent) => {
+      if (e.layerId?.startsWith(`${boxId}-scale-point`) && e.scale) {
+        const scale = e.scale;
+
+        setDimensions(v => ({
+          ...v,
+          width: scale.width,
+          height: scale.height,
+          length: scale.length,
+        }));
+
+        setCoords([scale.location.lng, scale.location.lat, scale.location.height]);
+      }
+
+      if (e.layerId?.startsWith(`${boxId}-edge-draggable`) && e.rotate) {
+        const rotate = e.rotate;
+
+        setDimensions(v => ({
+          ...v,
+          heading: rotate.heading,
+          pitch: rotate.pitch,
+          roll: rotate.roll,
+        }));
+      }
+    },
+    [boxId],
+  );
+
+  const eventHandler = useMemo(() => new ScreenSpaceEventHandler(viewer?.scene.canvas), [viewer]);
+  useEffect(() => {
+    eventHandler.setInputAction(handleMouseDown, ScreenSpaceEventType.LEFT_DOWN);
+    eventHandler.setInputAction(handleRawMouseMove, ScreenSpaceEventType.MOUSE_MOVE);
+    eventHandler.setInputAction(handleMouseUp, ScreenSpaceEventType.LEFT_UP);
+  }, [eventHandler, handleMouseDown, handleRawMouseMove, handleMouseUp]);
+
+  useEffect(() => () => eventHandler.destroy(), [eventHandler]);
+
+  const boxProperty = useMemo(() => ({ ...boxState, ...dimensions }), [boxState, dimensions]);
+  const builtinBoxProps = useMemo(
+    () =>
+      useBuiltinBox
+        ? {
+            visible,
+            handleLayerEdit,
+            geometry: {
+              type: "Point" as const,
+              coordinates: coords || coordinates || [0, 0, 0],
+            },
+            property: boxProperty,
+          }
+        : undefined,
+    [boxProperty, coordinates, coords, handleLayerEdit, useBuiltinBox, visible],
+  );
+
+  return {
+    ...clipping,
+    planes: useBuiltinBox ? BUILTIN_BOX_SIDE_PLANES : clipping?.planes,
+    width: useBuiltinBox ? dimensions?.width : clipping?.width,
+    height: useBuiltinBox ? dimensions?.height : clipping?.height,
+    length: useBuiltinBox ? dimensions?.length : clipping?.length,
+    heading: useBuiltinBox ? dimensions?.heading : clipping?.heading,
+    pitch: useBuiltinBox ? dimensions?.pitch : clipping?.pitch,
+    roll: useBuiltinBox ? dimensions?.roll : clipping?.roll,
+    coordinates: useBuiltinBox ? coords : clipping?.coordinates,
+    builtinBoxProps,
+  };
+};
+
+function getLayerId(target: RootEventTarget): string | undefined {
+  if (target && "id" in target && target.id instanceof Entity) {
+    return getTag(target.id)?.layerId;
+  } else if (target && target instanceof Cesium3DTileFeature) {
+    return getTag(target.tileset)?.layerId;
+  }
+  return undefined;
+}
diff --git a/web/src/beta/core/engines/Cesium/Feature/context.ts b/web/src/beta/core/engines/Cesium/Feature/context.ts
new file mode 100644
index 0000000000..27565ccc96
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/context.ts
@@ -0,0 +1,16 @@
+import { createContext, useContext as useReactContext } from "react";
+
+import { LayerEditEvent } from "@reearth/beta/core/Map";
+
+import type { Camera, FlyToDestination, CameraOptions, LayerSelectionReason } from "../..";
+
+export type Context = {
+  selectionReason?: LayerSelectionReason;
+  getCamera?: () => Camera | undefined;
+  flyTo?: (target: string | FlyToDestination, options?: CameraOptions) => void;
+  onLayerEdit?: (e: LayerEditEvent) => void;
+};
+
+export const context = createContext<Context>({});
+
+export const useContext = () => useReactContext(context);
diff --git a/web/src/beta/core/engines/Cesium/Feature/index.tsx b/web/src/beta/core/engines/Cesium/Feature/index.tsx
new file mode 100644
index 0000000000..d57adfee23
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/index.tsx
@@ -0,0 +1,191 @@
+import LRUCache from "lru-cache";
+import { useMemo } from "react";
+
+import { ComputedFeature, DataType, guessType } from "@reearth/beta/core/mantle";
+
+import type { AppearanceTypes, FeatureComponentProps, ComputedLayer } from "../..";
+
+import Box, { config as boxConfig } from "./Box";
+import Ellipsoid, { config as ellipsoidConfig } from "./Ellipsoid";
+import Marker, { config as markerConfig } from "./Marker";
+import Model, { config as modelConfig } from "./Model";
+import PhotoOverlay, { config as photoOverlayConfig } from "./PhotoOverlay";
+import Polygon, { config as polygonConfig } from "./Polygon";
+import Polyline, { config as polylineConfig } from "./Polyline";
+import Raster, { config as rasterConfig } from "./Raster";
+import Resource, { config as resourceConfig } from "./Resource";
+import Tileset, { config as tilesetConfig } from "./Tileset";
+import {
+  extractSimpleLayerData,
+  FeatureComponent,
+  FeatureComponentConfig,
+  generateIDWithMD5,
+} from "./utils";
+
+export * from "./utils";
+export { context, type Context } from "./context";
+export { getTag } from "./utils";
+
+const components: Record<keyof AppearanceTypes, [FeatureComponent, FeatureComponentConfig]> = {
+  marker: [Marker, markerConfig],
+  polyline: [Polyline, polylineConfig],
+  polygon: [Polygon, polygonConfig],
+  ellipsoid: [Ellipsoid, ellipsoidConfig],
+  model: [Model, modelConfig],
+  "3dtiles": [Tileset, tilesetConfig],
+  box: [Box, boxConfig],
+  photooverlay: [PhotoOverlay, photoOverlayConfig],
+  resource: [Resource, resourceConfig],
+  raster: [Raster, rasterConfig],
+};
+
+// This indicates what component should render for file extension.
+const displayConfig: Record<DataType, (keyof typeof components)[] | "auto"> = {
+  geojson: "auto",
+  csv: "auto",
+  czml: ["resource"],
+  kml: ["resource"],
+  wms: ["raster"],
+  mvt: ["raster"],
+  tms: ["raster"],
+  "3dtiles": ["3dtiles"],
+  "osm-buildings": ["3dtiles"],
+  gpx: "auto",
+  shapefile: "auto",
+  gtfs: "auto",
+  georss: [],
+  gml: [],
+  gltf: ["model"],
+  tiles: ["raster"],
+};
+
+// Some layer that is delegated data is not computed when layer is updated.
+// Feature's property of delegated data type is calculated when feature is loaded.
+// So in case of delegated data type, to attach property to layer, we need to use normal property before calculated.
+const PICKABLE_APPEARANCE: (keyof AppearanceTypes)[] = ["raster", "3dtiles"];
+const pickProperty = (k: keyof AppearanceTypes, layer: ComputedLayer) => {
+  if (!PICKABLE_APPEARANCE.includes(k)) {
+    return;
+  }
+  if (layer.layer.type !== "simple") {
+    return;
+  }
+  return layer.layer[k];
+};
+
+const CACHED_COMPONENTS = new LRUCache<string, JSX.Element>({ max: 10000 });
+const FEATURE_DELEGATE_THRESHOLD = 6000;
+
+export default function Feature({
+  layer,
+  isHidden,
+  ...props
+}: FeatureComponentProps): JSX.Element | null {
+  const data = extractSimpleLayerData(layer);
+  const ext = !data?.type || (data.type as string) === "auto" ? guessType(data?.url) : undefined;
+  let displayType = data?.type && displayConfig[ext ?? data.type];
+  if (layer.features?.length > FEATURE_DELEGATE_THRESHOLD) {
+    displayType = ["resource"];
+  }
+  const areAllDisplayTypeNoFeature =
+    Array.isArray(displayType) &&
+    displayType.every(k => components[k][1].noFeature && !components[k][1].noLayer);
+
+  const cachedRenderComponent = (
+    k: keyof AppearanceTypes,
+    f?: ComputedFeature,
+  ): JSX.Element | null => {
+    const componentId = generateIDWithMD5(
+      `${layer.id}_${f?.id ?? ""}_${k}_${isHidden}_${data?.url ?? ""}_${
+        JSON.stringify(f?.[k]) ?? ""
+      }`,
+    );
+
+    const cachedComponent = CACHED_COMPONENTS.get(componentId);
+    if (cachedComponent) {
+      return cachedComponent;
+    }
+
+    try {
+      const [C, config] = components[k] ?? [];
+      if (!C || (f && !f[k]) || (config.noLayer && !f) || (config.noFeature && f)) {
+        return null;
+      }
+
+      if (
+        (Array.isArray(displayType) && !displayType.includes(k)) ||
+        (!Array.isArray(displayType) && displayType !== "auto")
+      ) {
+        return null;
+      }
+
+      // Skip using the Resource component if the data layer type is geojson and it is considered as active
+      if (data?.type === "geojson" && displayType === "auto" && k === "resource") {
+        return null;
+      }
+
+      const component = (
+        <C
+          {...props}
+          key={componentId}
+          id={componentId}
+          property={f ? f[k] : layer[k] || pickProperty(k, layer)}
+          geometry={f?.geometry}
+          feature={f}
+          layer={layer}
+          isVisible={layer.layer.visible !== false && !isHidden}
+        />
+      );
+
+      // Cache the component output
+      CACHED_COMPONENTS.set(componentId, component);
+
+      return component;
+    } catch (e) {
+      // Log any errors that occur during rendering
+      console.error(`Error rendering component ${componentId}`, e);
+      return null;
+    }
+  };
+
+  const cachedNoFeatureComponents = useMemo(() => {
+    if (!areAllDisplayTypeNoFeature || !displayType || !Array.isArray(displayType)) {
+      return null;
+    }
+
+    return (
+      <>
+        {displayType.map(k => {
+          const [C] = components[k] ?? [];
+          const isVisible = layer.layer.visible !== false && !isHidden;
+
+          // "noFeature" component should be recreated when the following value is changed.
+          // data.url, isVisible
+          const key = generateIDWithMD5(`${layer?.id || ""}_${k}_${data?.url}_${isVisible}`);
+
+          return (
+            <C
+              {...props}
+              key={key}
+              id={`${layer.id}_${k}`}
+              property={pickProperty(k, layer) || layer[k]}
+              layer={layer}
+              isVisible={isVisible}
+            />
+          );
+        })}
+      </>
+    );
+  }, [areAllDisplayTypeNoFeature, displayType, layer, isHidden, data, props]);
+
+  return (
+    <>
+      {cachedNoFeatureComponents ||
+        [undefined, ...layer.features].flatMap(f =>
+          (Object.keys(components) as (keyof AppearanceTypes)[]).map(k =>
+            cachedRenderComponent(k, f),
+          ),
+        )}
+    </>
+  );
+}
diff --git a/web/src/beta/core/engines/Cesium/Feature/utils.test.tsx b/web/src/beta/core/engines/Cesium/Feature/utils.test.tsx
new file mode 100644
index 0000000000..623df9c531
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/utils.test.tsx
@@ -0,0 +1,30 @@
+import { expect, test } from "vitest";
+
+import { renderHook } from "@reearth/test/utils";
+
+import { usePick } from "./utils";
+
+test("usePick", () => {
+  const f = ["a", "b"] as const;
+  const p: { a?: number; b?: number; c?: number } = { a: 1, b: 2, c: 3 };
+  const { result, rerender } = renderHook(({ p }) => usePick(p, f), { initialProps: { p: p } });
+
+  expect(result.current).toEqual({ a: 1, b: 2 });
+  const first = result.current;
+
+  rerender({ p: { a: p.a, b: p.b, c: p.c } });
+  expect(result.current).toBe(first);
+  expect(result.current).toEqual({ a: 1, b: 2 });
+
+  rerender({ p: { c: p.c, b: p.b, a: p.a } });
+  expect(result.current).toBe(first);
+  expect(result.current).toEqual({ a: 1, b: 2 });
+
+  rerender({ p: { b: p.b, a: p.a } });
+  expect(result.current).toBe(first);
+  expect(result.current).toEqual({ a: 1, b: 2 });
+
+  rerender({ p: { a: 10 } });
+  expect(result.current).not.toBe(first);
+  expect(result.current).toEqual({ a: 10 });
+});
diff --git a/web/src/beta/core/engines/Cesium/Feature/utils.tsx b/web/src/beta/core/engines/Cesium/Feature/utils.tsx
new file mode 100644
index 0000000000..d57fc3317e
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/Feature/utils.tsx
@@ -0,0 +1,240 @@
+import composeRefs from "@seznam/compose-react-refs";
+import {
+  Cesium3DTileFeature,
+  Cesium3DTileset,
+  Color,
+  Entity as CesiumEntity,
+  Iso8601,
+  JulianDate,
+  PropertyBag,
+  TimeInterval as CesiumTimeInterval,
+  TimeIntervalCollection as CesiumTimeIntervalCollection,
+  DistanceDisplayCondition as CesiumDistanceDisplayCondition,
+  Model,
+  Cesium3DTilePointFeature,
+  ImageryLayer,
+} from "cesium";
+import md5 from "js-md5";
+import { pick } from "lodash-es";
+import {
+  ComponentProps,
+  ComponentType,
+  ForwardedRef,
+  forwardRef,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from "react";
+import { type CesiumComponentRef, Entity } from "resium";
+
+import { Data, Layer, LayerSimple, TimeInterval } from "@reearth/beta/core/mantle";
+
+import type { ComputedFeature, ComputedLayer, FeatureComponentProps, Geometry } from "../..";
+import type { InternalCesium3DTileFeature } from "../types";
+
+export type FeatureProps<P = any> = {
+  id: string;
+  property?: P;
+  isVisible?: boolean;
+  layer?: ComputedLayer;
+  feature?: ComputedFeature;
+  geometry?: Geometry;
+  sceneProperty?: any;
+} & Omit<FeatureComponentProps, "layer">;
+
+export type FeatureComponent = ComponentType<FeatureProps>;
+
+export type FeatureComponentConfig = {
+  noLayer?: boolean;
+  noFeature?: boolean;
+};
+
+export type Tag = {
+  layerId?: string;
+  featureId?: string;
+  draggable?: boolean;
+  unselectable?: boolean;
+  legacyLocationPropertyKey?: string;
+  originalProperties?: any;
+  computedFeature?: ComputedFeature;
+};
+
+export const EntityExt = forwardRef(EntityExtComponent);
+
+function EntityExtComponent(
+  {
+    layerId,
+    featureId,
+    draggable,
+    unselectable,
+    legacyLocationPropertyKey,
+    ...props
+  }: ComponentProps<typeof Entity> & Tag,
+  ref: ForwardedRef<CesiumComponentRef<CesiumEntity>>,
+) {
+  const r = useRef<CesiumComponentRef<CesiumEntity>>(null);
+
+  useLayoutEffect(() => {
+    attachTag(r.current?.cesiumElement, {
+      layerId: layerId || props.id,
+      featureId,
+      draggable,
+      unselectable,
+      legacyLocationPropertyKey,
+    });
+  }, [draggable, featureId, layerId, legacyLocationPropertyKey, props.id, unselectable]);
+
+  return <Entity ref={composeRefs(ref, r)} {...props} />;
+}
+
+export function attachTag(
+  entity:
+    | CesiumEntity
+    | Cesium3DTileset
+    | InternalCesium3DTileFeature
+    | ImageryLayer
+    | null
+    | undefined,
+  tag: Tag,
+) {
+  if (!entity) return;
+
+  if (entity instanceof Cesium3DTileset) {
+    (entity as any)[tagKey] = tag;
+    return;
+  }
+
+  if (
+    entity instanceof Cesium3DTileFeature ||
+    entity instanceof Cesium3DTilePointFeature ||
+    entity instanceof Model ||
+    entity instanceof ImageryLayer
+  ) {
+    (entity as any)[tagKey] = tag;
+    return;
+  }
+
+  if (!entity.properties) {
+    entity.properties = new PropertyBag();
+  }
+  for (const k of tagKeys) {
+    if (!(k in tag) && entity.properties.hasProperty(`reearth_${k}`))
+      entity.properties.removeProperty(`reearth_${k}`);
+    else entity.properties[`reearth_${k}`] = tag[k];
+  }
+}
+
+export function getTag(
+  entity:
+    | CesiumEntity
+    | Cesium3DTileset
+    | Cesium3DTileFeature
+    | Cesium3DTilePointFeature
+    | Model
+    | ImageryLayer
+    | null
+    | undefined,
+): Tag | undefined {
+  if (!entity) return;
+
+  if (entity instanceof Cesium3DTileset) {
+    return (entity as any)[tagKey];
+  }
+
+  if (
+    entity instanceof Cesium3DTileFeature ||
+    entity instanceof Cesium3DTilePointFeature ||
+    entity instanceof Model ||
+    entity instanceof ImageryLayer
+  ) {
+    return (entity as any)[tagKey];
+  }
+
+  if (!entity.properties) return;
+
+  return Object.fromEntries(
+    Object.entries(entity.properties)
+      .map(([k, v]): readonly [PropertyKey, any] | null => {
+        if (!tagKeys.includes(k.replace("reearth_", "") as keyof Tag)) return null;
+        return [k.replace("reearth_", ""), v];
+      })
+      .filter((e): e is readonly [PropertyKey, any] => !!e),
+  );
+}
+
+const tagObj: { [k in keyof Tag]: 1 } = {
+  draggable: 1,
+  featureId: 1,
+  layerId: 1,
+  unselectable: 1,
+  originalProperties: 1,
+  computedFeature: 1,
+};
+
+const tagKeys = Object.keys(tagObj) as (keyof Tag)[];
+
+const tagKey = "__reearth_tag";
+
+export const extractSimpleLayer = (
+  layer: ComputedLayer | Layer | undefined,
+): LayerSimple | void => {
+  const l = layer && "layer" in layer ? layer.layer : layer;
+  if (l?.type !== "simple") {
+    return;
+  }
+  return l;
+};
+
+export const extractSimpleLayerData = (layer: ComputedLayer | undefined): Data | undefined => {
+  return extractSimpleLayer(layer)?.data;
+};
+
+export const toColor = (c?: string) => {
+  if (!c || typeof c !== "string") return undefined;
+
+  // support alpha
+  const m = c.match(/^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})$|^#([A-Fa-f0-9]{3})([A-Fa-f0-9])$/);
+  if (!m) return Color.fromCssColorString(c);
+
+  const alpha = parseInt(m[4] ? m[4].repeat(2) : m[2], 16) / 255;
+  return Color.fromCssColorString(`#${m[1] ?? m[3]}`).withAlpha(alpha);
+};
+
+export const toTimeInterval = (
+  interval: TimeInterval | undefined,
+): CesiumTimeIntervalCollection | undefined => {
+  if (!interval) {
+    return;
+  }
+  return new CesiumTimeIntervalCollection([
+    new CesiumTimeInterval({
+      start: JulianDate.fromDate(interval[0]),
+      stop: interval[1] ? JulianDate.fromDate(interval[1]) : Iso8601.MAXIMUM_VALUE,
+    }),
+  ]);
+};
+
+export const toDistanceDisplayCondition = (
+  near: number | undefined,
+  far: number | undefined,
+): CesiumDistanceDisplayCondition | undefined => {
+  return typeof near === "number" || typeof far === "number"
+    ? new CesiumDistanceDisplayCondition(near ?? 0.0, far ?? Number.MAX_VALUE)
+    : undefined;
+};
+
+export const generateIDWithMD5 = (id: string) => {
+  const hash = md5.create();
+  hash.update(id);
+
+  return hash.hex();
+};
+
+export const usePick = <T extends object, U extends keyof T>(
+  o: T | undefined | null,
+  fields: readonly U[],
+): Pick<T, U> | undefined => {
+  const p = useMemo(() => (o ? pick(o, fields) : undefined), [o, fields]);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return useMemo(() => p, [JSON.stringify(p)]);
+};
diff --git a/web/src/beta/core/engines/Cesium/cameraLimiter.ts b/web/src/beta/core/engines/Cesium/cameraLimiter.ts
new file mode 100644
index 0000000000..b83a1c867c
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/cameraLimiter.ts
@@ -0,0 +1,257 @@
+import {
+  Cartesian3,
+  Cartographic,
+  Color,
+  EllipsoidGeodesic,
+  PolylineDashMaterialProperty,
+  Math,
+  Camera as CesiumCamera,
+  Rectangle,
+} from "cesium";
+import type { Viewer as CesiumViewer } from "cesium";
+import { useEffect, useMemo, useState, RefObject } from "react";
+import { CesiumComponentRef } from "resium";
+
+import { Camera } from "@reearth/beta/utils/value";
+
+import type { SceneProperty } from "..";
+
+import { getCamera } from "./common";
+
+const targetWidth = 1000000;
+const targetLength = 1000000;
+
+export function useCameraLimiter(
+  cesium: RefObject<CesiumComponentRef<CesiumViewer>>,
+  camera: Camera | undefined,
+  property: SceneProperty["cameraLimiter"] | undefined,
+) {
+  const geodesic = useMemo(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (
+      !viewer ||
+      viewer.isDestroyed() ||
+      !property?.cameraLimitterEnabled ||
+      !property.cameraLimitterTargetArea?.lng ||
+      !property.cameraLimitterTargetArea.lat
+    ) {
+      return undefined;
+    }
+
+    return getGeodesic(
+      viewer,
+      property.cameraLimitterTargetArea.lng,
+      property.cameraLimitterTargetArea.lat,
+    );
+  }, [
+    cesium,
+    property?.cameraLimitterEnabled,
+    property?.cameraLimitterTargetArea?.lng,
+    property?.cameraLimitterTargetArea?.lat,
+  ]);
+
+  // calculate inner limiter dimensions
+  const limiterDimensions = useMemo((): InnerLimiterDimensions | undefined => {
+    if (!geodesic) return undefined;
+
+    const width =
+      typeof property?.cameraLimitterTargetWidth === "number"
+        ? property.cameraLimitterTargetWidth
+        : targetWidth;
+    const length =
+      typeof property?.cameraLimitterTargetLength === "number"
+        ? property.cameraLimitterTargetLength
+        : targetLength;
+
+    const { cartesianArray, cartographicDimensions } = calcBoundaryBox(
+      geodesic,
+      length / 2,
+      width / 2,
+    );
+
+    return {
+      cartographicDimensions,
+      cartesianArray,
+    };
+  }, [property?.cameraLimitterTargetWidth, property?.cameraLimitterTargetLength, geodesic]);
+
+  // calculate maximum camera view (outer boundaries)
+  const [cameraViewOuterBoundaries, setCameraViewOuterBoundaries] = useState<
+    Cartesian3[] | undefined
+  >();
+
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed() || !property?.cameraLimitterTargetArea || !geodesic) return;
+
+    const camera = new CesiumCamera(viewer.scene);
+    camera.setView({
+      destination: Cartesian3.fromDegrees(
+        property.cameraLimitterTargetArea.lng,
+        property.cameraLimitterTargetArea.lat,
+        property.cameraLimitterTargetArea.height,
+      ),
+      orientation: {
+        heading: property?.cameraLimitterTargetArea.heading,
+        pitch: property?.cameraLimitterTargetArea.pitch,
+        roll: property?.cameraLimitterTargetArea.roll,
+        up: camera.up,
+      },
+    });
+
+    const computedViewRectangle = camera.computeViewRectangle();
+    if (!computedViewRectangle) return;
+    const rectangleHalfWidth = Rectangle.computeWidth(computedViewRectangle) * Math.PI * 1000000;
+    const rectangleHalfHeight = Rectangle.computeHeight(computedViewRectangle) * Math.PI * 1000000;
+
+    const {
+      cameraLimitterTargetWidth: width = targetWidth,
+      cameraLimitterTargetLength: length = targetLength,
+    } = property ?? {};
+
+    const { cartesianArray } = calcBoundaryBox(
+      geodesic,
+      length / 2 + rectangleHalfHeight,
+      width / 2 + rectangleHalfWidth,
+    );
+
+    setCameraViewOuterBoundaries(cartesianArray);
+  }, [cesium, property, geodesic]);
+
+  // Manage camera limiter conditions
+  useEffect(() => {
+    const viewer = cesium?.current?.cesiumElement;
+    const camera = getCamera(cesium?.current?.cesiumElement);
+    if (
+      !viewer ||
+      viewer.isDestroyed() ||
+      !camera ||
+      !property?.cameraLimitterEnabled ||
+      !limiterDimensions
+    )
+      return;
+    viewer.camera.setView({
+      destination: getAllowedCameraDestination(camera, limiterDimensions),
+      orientation: {
+        heading: viewer.camera.heading,
+        pitch: viewer.camera.pitch,
+        roll: viewer.camera.roll,
+        up: viewer.camera.up,
+      },
+    });
+  }, [camera, cesium, property, limiterDimensions]);
+
+  return {
+    cameraViewBoundaries: limiterDimensions?.cartesianArray,
+    cameraViewOuterBoundaries,
+    cameraViewBoundariesMaterial,
+  };
+}
+
+export const cameraViewBoundariesMaterial = new PolylineDashMaterialProperty({
+  color: Color.RED,
+});
+
+export type InnerLimiterDimensions = {
+  cartographicDimensions: {
+    rightDimension: Cartographic;
+    leftDimension: Cartographic;
+    topDimension: Cartographic;
+    bottomDimension: Cartographic;
+  };
+  cartesianArray: Cartesian3[];
+};
+
+export const getGeodesic = (
+  viewer: CesiumViewer,
+  lng: number,
+  lat: number,
+): { vertical: EllipsoidGeodesic; horizontal: EllipsoidGeodesic } | undefined => {
+  const ellipsoid = viewer.scene.globe.ellipsoid;
+
+  const centerPoint = Cartesian3.fromDegrees(lng, lat, 0);
+
+  const cartographicCenterPoint = Cartographic.fromCartesian(centerPoint);
+  const normal = ellipsoid.geodeticSurfaceNormal(centerPoint);
+  const east = Cartesian3.normalize(
+    Cartesian3.cross(Cartesian3.UNIT_Z, normal, new Cartesian3()),
+    new Cartesian3(),
+  );
+  const north = Cartesian3.normalize(
+    Cartesian3.cross(normal, east, new Cartesian3()),
+    new Cartesian3(),
+  );
+
+  const vertical = new EllipsoidGeodesic(
+    cartographicCenterPoint,
+    Cartographic.fromCartesian(north),
+    ellipsoid,
+  );
+  const horizontal = new EllipsoidGeodesic(
+    cartographicCenterPoint,
+    Cartographic.fromCartesian(east),
+    ellipsoid,
+  );
+  return { vertical, horizontal };
+};
+
+export const calcBoundaryBox = (
+  geodesic: { vertical: EllipsoidGeodesic; horizontal: EllipsoidGeodesic },
+  halfLength: number,
+  halfWidth: number,
+): {
+  cartographicDimensions: {
+    rightDimension: Cartographic;
+    leftDimension: Cartographic;
+    topDimension: Cartographic;
+    bottomDimension: Cartographic;
+  };
+  cartesianArray: Cartesian3[];
+} => {
+  const topDimension = geodesic.vertical.interpolateUsingSurfaceDistance(halfLength);
+  const bottomDimension = geodesic.vertical.interpolateUsingSurfaceDistance(-halfLength);
+  const rightDimension = geodesic.horizontal.interpolateUsingSurfaceDistance(halfWidth);
+  const leftDimension = geodesic.horizontal.interpolateUsingSurfaceDistance(-halfWidth);
+
+  const rightTop = new Cartographic(rightDimension.longitude, topDimension.latitude, 0);
+  const leftTop = new Cartographic(leftDimension.longitude, topDimension.latitude, 0);
+  const rightBottom = new Cartographic(rightDimension.longitude, bottomDimension.latitude, 0);
+  const leftBottom = new Cartographic(leftDimension.longitude, bottomDimension.latitude, 0);
+  return {
+    cartographicDimensions: {
+      rightDimension,
+      leftDimension,
+      topDimension,
+      bottomDimension,
+    },
+    cartesianArray: [
+      Cartographic.toCartesian(rightTop),
+      Cartographic.toCartesian(leftTop),
+      Cartographic.toCartesian(leftBottom),
+      Cartographic.toCartesian(rightBottom),
+      Cartographic.toCartesian(rightTop),
+    ],
+  };
+};
+
+export const getAllowedCameraDestination = (
+  camera: Camera,
+  limiterDimensions: InnerLimiterDimensions,
+): Cartesian3 => {
+  const cameraPosition = Cartographic.fromDegrees(camera?.lng, camera?.lat, camera?.height);
+
+  const destination = new Cartographic(
+    Math.clamp(
+      cameraPosition.longitude,
+      limiterDimensions.cartographicDimensions.leftDimension.longitude,
+      limiterDimensions.cartographicDimensions.rightDimension.longitude,
+    ),
+    Math.clamp(
+      cameraPosition.latitude,
+      limiterDimensions.cartographicDimensions.bottomDimension.latitude,
+      limiterDimensions.cartographicDimensions.topDimension.latitude,
+    ),
+    cameraPosition.height,
+  );
+  return Cartographic.toCartesian(destination);
+};
diff --git a/web/src/beta/core/engines/Cesium/common.test.ts b/web/src/beta/core/engines/Cesium/common.test.ts
new file mode 100644
index 0000000000..02595d8868
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/common.test.ts
@@ -0,0 +1,30 @@
+import { Entity, JulianDate } from "cesium";
+import { expect, test } from "vitest";
+
+import { attachTag } from "./common";
+
+test("attachTag", () => {
+  const entity = new Entity();
+  const time = new JulianDate();
+
+  expect(entity.properties?.hasProperty("tag_a")).toBe(undefined);
+
+  attachTag(entity, "tag_a", "value_a");
+  expect(entity.properties?.hasProperty("tag_a")).toBe(true);
+  expect(entity.properties?.hasProperty("tag_b")).toBe(false);
+  const result1 = entity.properties?.getValue(time);
+  expect(result1["tag_a"]).toBe("value_a");
+
+  attachTag(entity, "tag_b", "value_b");
+  expect(entity.properties?.hasProperty("tag_b")).toBe(true);
+  const result2 = entity.properties?.getValue(time);
+  expect(result2["tag_b"]).toBe("value_b");
+
+  attachTag(entity, "tag_a", "value_a2");
+  expect(entity.properties?.hasProperty("tag_a")).toBe(true);
+  const result3 = entity.properties?.getValue(time);
+  expect(result3["tag_a"]).toBe("value_a2");
+
+  attachTag(entity, "tag_a", undefined);
+  expect(entity.properties?.hasProperty("tag_a")).toBe(false);
+});
diff --git a/web/src/beta/core/engines/Cesium/common.ts b/web/src/beta/core/engines/Cesium/common.ts
new file mode 100644
index 0000000000..e2f46bbc3d
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/common.ts
@@ -0,0 +1,719 @@
+import {
+  ColorBlendMode,
+  BoundingSphere,
+  HeadingPitchRange,
+  HorizontalOrigin,
+  VerticalOrigin,
+  Camera as CesiumCamera,
+  Math as CesiumMath,
+  Scene,
+  Cartesian2,
+  Cartesian3,
+  CesiumWidget,
+  PerspectiveFrustum,
+  OrthographicOffCenterFrustum,
+  Viewer,
+  HeightReference,
+  ClassificationType as CesiumClassificationType,
+  ShadowMode,
+  Entity,
+  PropertyBag,
+  Clock as CesiumClock,
+  JulianDate,
+  Ellipsoid,
+  Quaternion,
+  Matrix3,
+  Cartographic,
+  EllipsoidTerrainProvider,
+  sampleTerrainMostDetailed,
+  Ray,
+  IntersectionTests,
+  Matrix4,
+  Color,
+  SceneMode,
+  Cesium3DTileColorBlendMode,
+} from "cesium";
+import { useCallback, MutableRefObject } from "react";
+
+import { ClassificationType } from "@reearth/beta/core/mantle";
+import { useCanvas, useImage } from "@reearth/beta/utils/image";
+import { tweenInterval } from "@reearth/beta/utils/raf";
+
+import type { Camera, CameraOptions, Clock, FlyToDestination } from "..";
+
+export const layerIdField = `__reearth_layer_id`;
+
+const defaultImageSize = 50;
+
+export const drawIcon = (
+  c: HTMLCanvasElement,
+  image: HTMLImageElement | undefined,
+  w: number,
+  h: number,
+  crop: "circle" | "rounded" | "none" = "none",
+  shadow = false,
+  shadowColor = "rgba(0, 0, 0, 0.7)",
+  shadowBlur = 3,
+  shadowOffsetX = 0,
+  shadowOffsetY = 0,
+) => {
+  const ctx = c.getContext("2d");
+  if (!image || !ctx) return;
+
+  ctx.save();
+
+  c.width = w + shadowBlur;
+  c.height = h + shadowBlur;
+  ctx.shadowBlur = shadowBlur;
+  ctx.shadowOffsetX = shadowOffsetX;
+  ctx.shadowOffsetY = shadowOffsetY;
+  ctx.globalCompositeOperation = "source-over";
+  ctx.clearRect(0, 0, c.width, c.height);
+  ctx.drawImage(image, (c.width - w) / 2, (c.height - h) / 2, w, h);
+
+  if (crop === "circle") {
+    ctx.fillStyle = "black";
+    ctx.globalCompositeOperation = "destination-in";
+    ctx.arc(w / 2, h / 2, Math.min(w, h) / 2, 0, 2 * Math.PI);
+    ctx.fill();
+
+    if (shadow) {
+      ctx.shadowColor = shadowColor;
+      ctx.globalCompositeOperation = "destination-over";
+      ctx.fillStyle = "black";
+      ctx.arc(w / 2, h / 2, Math.min(w, h) / 2, 0, 2 * Math.PI);
+      ctx.fill();
+    }
+  } else if (shadow) {
+    ctx.shadowColor = shadowColor;
+    ctx.globalCompositeOperation = "destination-over";
+    ctx.fillStyle = "black";
+    ctx.rect((c.width - w) / 2, (c.height - h) / 2, w, h);
+    ctx.fill();
+  }
+
+  ctx.restore();
+};
+
+export const useIcon = ({
+  image,
+  imageSize,
+  crop,
+  shadow,
+  shadowColor,
+  shadowBlur,
+  shadowOffsetX,
+  shadowOffsetY,
+}: {
+  image?: string;
+  imageSize?: number;
+  crop?: "circle" | "rounded" | "none";
+  shadow?: boolean;
+  shadowColor?: string;
+  shadowBlur?: number;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+}): [string, number, number] => {
+  const img = useImage(image);
+
+  const w = !img
+    ? 0
+    : typeof imageSize === "number"
+    ? Math.floor(img.width * imageSize)
+    : Math.min(defaultImageSize, img.width);
+  const h = !img
+    ? 0
+    : typeof imageSize === "number"
+    ? Math.floor(img.height * imageSize)
+    : Math.floor((w / img.width) * img.height);
+
+  const draw = useCallback(
+    (can: HTMLCanvasElement) =>
+      drawIcon(can, img, w, h, crop, shadow, shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY),
+    [crop, h, img, shadow, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, w],
+  );
+  const canvas = useCanvas(draw);
+  return [canvas, w, h];
+};
+
+export const ho = (o: "left" | "center" | "right" | undefined): HorizontalOrigin | undefined =>
+  ({
+    left: HorizontalOrigin.LEFT,
+    center: HorizontalOrigin.CENTER,
+    right: HorizontalOrigin.RIGHT,
+    [""]: undefined,
+  }[o || ""]);
+
+export const vo = (
+  o: "top" | "center" | "baseline" | "bottom" | undefined,
+): VerticalOrigin | undefined =>
+  ({
+    top: VerticalOrigin.TOP,
+    center: VerticalOrigin.CENTER,
+    baseline: VerticalOrigin.BASELINE,
+    bottom: VerticalOrigin.BOTTOM,
+    [""]: undefined,
+  }[o || ""]);
+
+export const getLocationFromScreen = (
+  scene: Scene | undefined | null,
+  x: number,
+  y: number,
+  withTerrain = false,
+) => {
+  if (!scene) return undefined;
+  const camera = scene.camera;
+  const ellipsoid = scene.globe.ellipsoid;
+  let cartesian;
+  if (withTerrain) {
+    const ray = camera.getPickRay(new Cartesian2(x, y));
+    if (ray) {
+      cartesian = scene.globe.pick(ray, scene);
+    }
+  }
+  if (!cartesian) {
+    cartesian = camera?.pickEllipsoid(new Cartesian2(x, y), ellipsoid);
+  }
+  if (!cartesian) return undefined;
+  const { latitude, longitude, height } = ellipsoid.cartesianToCartographic(cartesian);
+  return {
+    lat: CesiumMath.toDegrees(latitude),
+    lng: CesiumMath.toDegrees(longitude),
+    height,
+  };
+};
+
+export const flyTo = (
+  cesiumCamera?: CesiumCamera,
+  camera?: {
+    /** degrees */
+    lat?: number;
+    /** degrees */
+    lng?: number;
+    /** meters */
+    height?: number;
+    /** radians */
+    heading?: number;
+    /** radians */
+    pitch?: number;
+    /** radians */
+    roll?: number;
+    /** Field of view expressed in radians */
+    fov?: number;
+  },
+  options?: {
+    /** Seconds */
+    duration?: number;
+    easing?: (time: number) => number;
+  },
+) => {
+  if (!cesiumCamera || !camera) return () => {};
+
+  const cancelFov = animateFOV({
+    fov: camera.fov,
+    camera: cesiumCamera,
+    duration: options?.duration,
+    easing: options?.easing,
+  });
+
+  const position =
+    typeof camera.lat === "number" &&
+    typeof camera.lng === "number" &&
+    typeof camera.height === "number"
+      ? Cartesian3.fromDegrees(camera.lng, camera.lat, camera.height)
+      : undefined;
+
+  if (position) {
+    cesiumCamera.flyTo({
+      destination: position,
+      orientation: {
+        heading: camera.heading,
+        pitch: camera.pitch,
+        roll: camera.roll,
+      },
+      duration: options?.duration ?? 0,
+      easingFunction: options?.easing,
+    });
+  }
+
+  return () => {
+    cancelFov?.();
+    cesiumCamera?.cancelFlight();
+  };
+};
+
+export const lookAt = (
+  cesiumCamera?: CesiumCamera,
+  camera?: {
+    /** degrees */
+    lat?: number;
+    /** degrees */
+    lng?: number;
+    /** meters */
+    height?: number;
+    /** radians */
+    heading?: number;
+    /** radians */
+    pitch?: number;
+    /** radians */
+    range?: number;
+    /** Field of view expressed in radians */
+    fov?: number;
+  },
+  options?: {
+    /** Seconds */
+    duration?: number;
+    easing?: (time: number) => number;
+  },
+) => {
+  if (!cesiumCamera || !camera) return () => {};
+
+  const cancelFov = animateFOV({
+    fov: camera.fov,
+    camera: cesiumCamera,
+    duration: options?.duration,
+    easing: options?.easing,
+  });
+
+  const position =
+    typeof camera.lat === "number" &&
+    typeof camera.lng === "number" &&
+    typeof camera.height === "number"
+      ? Cartesian3.fromDegrees(camera.lng, camera.lat, camera.height)
+      : undefined;
+
+  if (position) {
+    cesiumCamera.flyToBoundingSphere(new BoundingSphere(position), {
+      offset: new HeadingPitchRange(camera.heading, camera.pitch, camera.range),
+      duration: options?.duration,
+      easingFunction: options?.easing,
+    });
+  }
+
+  return () => {
+    cancelFov?.();
+    cesiumCamera?.cancelFlight();
+  };
+};
+
+export const lookAtWithoutAnimation = (
+  scene: Scene,
+  camera?: {
+    /** degrees */
+    lat?: number;
+    /** degrees */
+    lng?: number;
+    /** meters */
+    height?: number;
+    /** radians */
+    heading?: number;
+    /** radians */
+    pitch?: number;
+    /** radians */
+    range?: number;
+    /** Field of view expressed in radians */
+    fov?: number;
+  },
+) => {
+  if (!camera) {
+    return;
+  }
+
+  const position =
+    typeof camera.lat === "number" && typeof camera.lng === "number"
+      ? Cartesian3.fromDegrees(camera.lng, camera.lat, camera.height)
+      : undefined;
+
+  if (position) {
+    scene.camera.lookAtTransform(Matrix4.fromTranslation(position));
+  }
+};
+
+export const animateFOV = ({
+  fov,
+  camera,
+  easing,
+  duration,
+}: {
+  fov?: number;
+  camera: CesiumCamera;
+  easing?: (t: number) => number;
+  duration?: number;
+}): (() => void) | undefined => {
+  // fov animation
+  if (
+    typeof fov === "number" &&
+    camera.frustum instanceof PerspectiveFrustum &&
+    typeof camera.frustum.fov === "number" &&
+    camera.frustum.fov !== fov
+  ) {
+    const fromFov = camera.frustum.fov;
+    return tweenInterval(
+      t => {
+        if (!(camera.frustum instanceof PerspectiveFrustum)) return;
+        camera.frustum.fov = (fov - fromFov) * t + fromFov;
+      },
+      easing || "inOutCubic",
+      (duration ?? 0) * 1000,
+    );
+  }
+  return undefined;
+};
+
+/**
+ * Get the center of globe.
+ */
+export const getCenterCamera = ({
+  camera,
+  scene,
+}: {
+  camera: CesiumCamera;
+  scene: Scene;
+}): Cartesian3 | void => {
+  const result = new Cartesian3();
+  const ray = camera.getPickRay(camera.positionWC);
+  if (ray) {
+    ray.origin = camera.positionWC;
+    ray.direction = camera.directionWC;
+    return scene.globe.pick(ray, scene, result);
+  }
+};
+
+export const zoom = (
+  { viewer, relativeAmount }: { viewer: Viewer; relativeAmount: number },
+  options?: CameraOptions,
+) => {
+  const { camera, scene } = viewer;
+  if (scene.mode !== SceneMode.SCENE3D) {
+    const pos = getCamera(viewer);
+    flyTo(camera, { ...pos, height: (pos?.height || 1) * relativeAmount }, { duration: 0.5 });
+    return;
+  }
+
+  const center = getCenterCamera({ camera, scene });
+  const target =
+    center ||
+    IntersectionTests.grazingAltitudeLocation(
+      // Get the ray from cartographic to the camera direction
+      new Ray(
+        // Get the cartographic position of camera on 3D space.
+        scene.globe.ellipsoid.cartographicToCartesian(camera.positionCartographic),
+        // Get the camera direction.
+        camera.directionWC,
+      ),
+      scene.globe.ellipsoid,
+    );
+
+  if (!target) {
+    return;
+  }
+
+  const orientation = {
+    heading: camera.heading,
+    pitch: camera.pitch,
+    roll: camera.roll,
+  };
+
+  const cartesian3Scratch = new Cartesian3();
+  const direction = Cartesian3.subtract(camera.position, target, cartesian3Scratch);
+  const movementVector = Cartesian3.multiplyByScalar(direction, relativeAmount, direction);
+  const endPosition = Cartesian3.add(target, movementVector, target);
+
+  camera.flyTo({
+    destination: endPosition,
+    orientation: orientation,
+    duration: options?.duration || 0.5,
+    convert: false,
+  });
+};
+
+export const getCamera = (viewer: Viewer | CesiumWidget | undefined): Camera | undefined => {
+  if (!viewer || viewer.isDestroyed() || !viewer.camera || !viewer.scene) return undefined;
+  const { camera } = viewer;
+  if (
+    !(
+      camera.frustum instanceof PerspectiveFrustum ||
+      camera.frustum instanceof OrthographicOffCenterFrustum
+    )
+  )
+    return;
+  const { latitude, longitude, height } = camera.positionCartographic;
+  const lat = CesiumMath.toDegrees(latitude);
+  const lng = CesiumMath.toDegrees(longitude);
+  const { heading, pitch, roll } = camera;
+  const fov = camera.frustum instanceof PerspectiveFrustum ? camera.frustum.fov : 1;
+  return { lng, lat, height, heading, pitch, roll, fov };
+};
+
+export const getClock = (clock: CesiumClock | undefined): Clock | undefined => {
+  if (!clock) return undefined;
+  return {
+    get start() {
+      return JulianDate.toDate(clock.startTime);
+    },
+    get stop() {
+      return JulianDate.toDate(clock.stopTime);
+    },
+    get current() {
+      return JulianDate.toDate(clock.currentTime);
+    },
+    get playing() {
+      return clock.shouldAnimate;
+    },
+    get speed() {
+      return clock.multiplier;
+    },
+  };
+};
+
+export const colorBlendMode = (colorBlendMode?: "highlight" | "replace" | "mix" | "none") =>
+  ((
+    {
+      highlight: ColorBlendMode.HIGHLIGHT,
+      replace: ColorBlendMode.REPLACE,
+      mix: ColorBlendMode.MIX,
+    } as { [key in string]?: ColorBlendMode }
+  )[colorBlendMode || ""]);
+
+export const colorBlendModeFor3DTile = (
+  colorBlendMode?: "highlight" | "replace" | "mix" | "default",
+) =>
+  ((
+    {
+      highlight: Cesium3DTileColorBlendMode.HIGHLIGHT,
+      replace: Cesium3DTileColorBlendMode.REPLACE,
+      mix: Cesium3DTileColorBlendMode.MIX,
+    } as { [key in string]?: Cesium3DTileColorBlendMode }
+  )[colorBlendMode || ""]);
+
+export const heightReference = (
+  heightReference?: "none" | "clamp" | "relative",
+): HeightReference | undefined =>
+  ((
+    {
+      clamp: HeightReference.CLAMP_TO_GROUND,
+      relative: HeightReference.RELATIVE_TO_GROUND,
+      none: HeightReference.NONE,
+    } as {
+      [key in string]?: HeightReference;
+    }
+  )[heightReference || ""]);
+
+export const classificationType = (
+  classificationType?: ClassificationType,
+): CesiumClassificationType | undefined =>
+  ((
+    {
+      both: CesiumClassificationType.BOTH,
+      "3dtiles": CesiumClassificationType.CESIUM_3D_TILE,
+      terrain: CesiumClassificationType.TERRAIN,
+    } as {
+      [key in ClassificationType | ""]?: CesiumClassificationType;
+    }
+  )[classificationType || ""]);
+
+export const shadowMode = (
+  shadows?: "disabled" | "enabled" | "cast_only" | "receive_only",
+): ShadowMode | undefined =>
+  ((
+    {
+      enabled: ShadowMode.ENABLED,
+      cast_only: ShadowMode.CAST_ONLY,
+      receive_only: ShadowMode.RECEIVE_ONLY,
+      disabled: ShadowMode.DISABLED,
+    } as {
+      [key in string]?: ShadowMode;
+    }
+  )[shadows || ""]);
+
+export const unselectableTag = "reearth_unselectable";
+export const draggableTag = "reearth_draggable";
+
+export function isSelectable(e: Entity | undefined): boolean {
+  return !e?.properties?.hasProperty(unselectableTag);
+}
+
+export function isDraggable(e: Entity): string | undefined {
+  return e.properties?.[draggableTag];
+}
+
+export function attachTag(entity: Entity | undefined, tag: string, value: any) {
+  if (!entity) return;
+  if (typeof value !== "undefined" && !entity.properties) {
+    entity.properties = new PropertyBag({ [tag]: value });
+  } else if (typeof value === "undefined") {
+    entity.properties?.removeProperty(tag);
+  } else if (entity.properties?.hasProperty(tag)) {
+    entity.properties?.removeProperty(tag);
+    entity.properties?.addProperty(tag, value);
+  } else {
+    entity.properties?.addProperty(tag, value);
+  }
+}
+
+export function lookHorizontal(scene: Scene, amount: number) {
+  const camera = scene.camera;
+  const ellipsoid = scene.globe.ellipsoid;
+  const surfaceNormal = ellipsoid.geodeticSurfaceNormal(camera.position, new Cartesian3());
+  camera.look(surfaceNormal, amount);
+}
+
+export function lookVertical(scene: Scene, amount: number) {
+  const camera = scene.camera;
+  const ellipsoid = scene.globe.ellipsoid;
+  const lookAxis = projectVectorToSurface(camera.right, camera.position, ellipsoid);
+  const surfaceNormal = ellipsoid.geodeticSurfaceNormal(camera.position, new Cartesian3());
+  const currentAngle = CesiumMath.toDegrees(Cartesian3.angleBetween(surfaceNormal, camera.up));
+  const upAfterLook = rotateVectorAboutAxis(camera.up, lookAxis, amount);
+  const angleAfterLook = CesiumMath.toDegrees(Cartesian3.angleBetween(surfaceNormal, upAfterLook));
+  const friction = angleAfterLook < currentAngle ? 1 : (90 - currentAngle) / 90;
+  camera.look(lookAxis, amount * friction);
+}
+
+export function moveForward(scene: Scene, amount: number) {
+  const direction = projectVectorToSurface(
+    scene.camera.direction,
+    scene.camera.position,
+    scene.globe.ellipsoid,
+  );
+  scene.camera.move(direction, amount);
+}
+
+export function moveBackward(scene: Scene, amount: number) {
+  const direction = projectVectorToSurface(
+    scene.camera.direction,
+    scene.camera.position,
+    scene.globe.ellipsoid,
+  );
+  scene.camera.move(direction, -amount);
+}
+
+export function moveUp(scene: Scene, amount: number) {
+  const surfaceNormal = scene.globe.ellipsoid.geodeticSurfaceNormal(
+    scene.camera.position,
+    new Cartesian3(),
+  );
+  scene.camera.move(surfaceNormal, amount);
+}
+
+export function moveDown(scene: Scene, amount: number) {
+  const surfaceNormal = scene.globe.ellipsoid.geodeticSurfaceNormal(
+    scene.camera.position,
+    new Cartesian3(),
+  );
+  scene.camera.move(surfaceNormal, -amount);
+}
+
+export function moveLeft(scene: Scene, amount: number) {
+  const direction = projectVectorToSurface(
+    scene.camera.right,
+    scene.camera.position,
+    scene.globe.ellipsoid,
+  );
+  scene.camera.move(direction, -amount);
+}
+
+export function moveRight(scene: Scene, amount: number) {
+  const direction = projectVectorToSurface(
+    scene.camera.right,
+    scene.camera.position,
+    scene.globe.ellipsoid,
+  );
+  scene.camera.move(direction, amount);
+}
+
+export async function moveOverTerrain(viewer: Viewer, offset = 0) {
+  const camera = getCamera(viewer);
+  if (camera?.lng === undefined || camera?.lat === undefined) return;
+  const height = await sampleTerrainHeight(viewer.scene, camera.lng, camera.lat);
+  if (height && height !== 0) {
+    const innerCamera = getCamera(viewer);
+    if (innerCamera && innerCamera?.height < height + offset) {
+      viewer.scene.camera.moveUp(height + offset - innerCamera.height);
+    }
+  }
+}
+
+export async function flyToGround(
+  viewer: Viewer,
+  cancelCameraFlight: MutableRefObject<(() => void) | undefined>,
+  camera: FlyToDestination,
+  options?: {
+    duration?: number;
+    easing?: (time: number) => number;
+  },
+  offset = 0,
+) {
+  if (camera.lng === undefined || camera.lat === undefined) return;
+  const height = await sampleTerrainHeight(viewer.scene, camera.lng, camera.lat);
+  const tarHeight = height ? height + offset : offset;
+  cancelCameraFlight.current?.();
+  cancelCameraFlight.current = flyTo(
+    viewer.scene?.camera,
+    { ...getCamera(viewer), ...camera, height: tarHeight },
+    options,
+  );
+}
+
+function projectVectorToSurface(vector: Cartesian3, position: Cartesian3, ellipsoid: Ellipsoid) {
+  const surfaceNormal = ellipsoid.geodeticSurfaceNormal(position, new Cartesian3());
+  const magnitudeOfProjectionOnSurfaceNormal = Cartesian3.dot(vector, surfaceNormal);
+  const projectionOnSurfaceNormal = Cartesian3.multiplyByScalar(
+    surfaceNormal,
+    magnitudeOfProjectionOnSurfaceNormal,
+    new Cartesian3(),
+  );
+  return Cartesian3.subtract(vector, projectionOnSurfaceNormal, new Cartesian3());
+}
+
+function rotateVectorAboutAxis(vector: Cartesian3, rotateAxis: Cartesian3, rotateAmount: number) {
+  const quaternion = Quaternion.fromAxisAngle(rotateAxis, -rotateAmount, new Quaternion());
+  const rotation = Matrix3.fromQuaternion(quaternion, new Matrix3());
+  const rotatedVector = Matrix3.multiplyByVector(rotation, vector, vector.clone());
+  return rotatedVector;
+}
+
+export async function sampleTerrainHeight(
+  scene: Scene,
+  lng: number,
+  lat: number,
+): Promise<number | undefined> {
+  const terrainProvider = scene.terrainProvider;
+  if (terrainProvider instanceof EllipsoidTerrainProvider) return 0;
+
+  const [sample] = await sampleTerrainMostDetailed(terrainProvider, [
+    Cartographic.fromDegrees(lng, lat),
+  ]);
+  return sample.height;
+}
+
+export async function sampleTerrainHeightFromCartesian(scene: Scene, translation: Cartesian3) {
+  const cart = Cartographic.fromCartesian(translation);
+  const [lng, lat] = [
+    CesiumMath.toDegrees(cart?.longitude || 0),
+    CesiumMath.toDegrees(cart?.latitude || 0),
+  ];
+  if (!lng || !lat) {
+    return;
+  }
+  return await sampleTerrainHeight(scene, lng, lat);
+}
+
+export const toColor = (c?: string) => {
+  if (!c || typeof c !== "string") return undefined;
+
+  // support alpha
+  const m = c.match(/^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})$|^#([A-Fa-f0-9]{3})([A-Fa-f0-9])$/);
+  if (!m) return Color.fromCssColorString(c);
+
+  const alpha = parseInt(m[4] ? m[4].repeat(2) : m[2], 16) / 255;
+  return Color.fromCssColorString(`#${m[1] ?? m[3]}`).withAlpha(alpha);
+};
+
+export const updateMapController = (viewer: Viewer, enabled: boolean) => {
+  viewer.scene.screenSpaceCameraController.enableTranslate = enabled;
+  viewer.scene.screenSpaceCameraController.enableRotate = enabled;
+  viewer.scene.screenSpaceCameraController.enableLook = enabled;
+  viewer.scene.screenSpaceCameraController.enableTilt = enabled;
+  viewer.scene.screenSpaceCameraController.enableZoom = enabled;
+};
diff --git a/web/src/beta/core/engines/Cesium/core/Clock.tsx b/web/src/beta/core/engines/Cesium/core/Clock.tsx
new file mode 100644
index 0000000000..ef7799eccd
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/core/Clock.tsx
@@ -0,0 +1,88 @@
+import { Clock as CesiumClock, ClockRange, ClockStep, JulianDate } from "cesium";
+import { useCallback, useEffect, useMemo } from "react";
+import { Clock, useCesium } from "resium";
+
+import { truncMinutes } from "@reearth/beta/utils/time";
+
+import type { Clock as ClockType, SceneProperty } from "../..";
+
+export type Props = {
+  property?: SceneProperty;
+  clock?: ClockType;
+  onTick?: (d: Date, clock: { start: Date; stop: Date }) => void;
+};
+
+export default function ReearthClock({ property, clock, onTick }: Props): JSX.Element | null {
+  const { animation, visible, stepType, rangeType, multiplier, step } = property?.timeline ?? {};
+  const startTime = useMemo(
+    () => (clock?.start ? JulianDate.fromDate(clock.start) : undefined),
+    [clock?.start],
+  );
+  const stopTime = useMemo(
+    () => (clock?.stop ? JulianDate.fromDate(clock?.stop) : undefined),
+    [clock?.stop],
+  );
+  const currentTime = useMemo(
+    () => (clock?.current ? JulianDate.fromDate(clock?.current) : undefined),
+    [clock],
+  );
+  const clockStep =
+    stepType === "fixed" ? ClockStep.TICK_DEPENDENT : ClockStep.SYSTEM_CLOCK_MULTIPLIER;
+  const clockMultiplier = stepType === "fixed" ? step ?? 1 : multiplier ?? 1;
+
+  const { viewer } = useCesium();
+
+  const handleTick = useCallback(
+    (clock: CesiumClock) => {
+      const start = JulianDate.toDate(clock.startTime);
+      const stop = JulianDate.toDate(clock.stopTime);
+
+      // Truncate minutes for displaying correctly time on timeline widget
+      const truncatedStart = truncMinutes(new Date(start));
+      if (viewer && start.toISOString() !== truncatedStart.toISOString()) {
+        viewer.clock.startTime = JulianDate.fromDate(truncatedStart);
+      }
+
+      // NOTE: Must not update state. This event will be called every frame.
+      onTick?.(JulianDate.toDate(clock.currentTime), {
+        start,
+        stop,
+      });
+    },
+    [onTick, viewer],
+  );
+
+  useEffect(() => {
+    if (!viewer) return;
+    if (viewer.animation?.container) {
+      (viewer.animation.container as HTMLDivElement).style.visibility = visible
+        ? "visible"
+        : "hidden";
+    }
+    if (viewer.timeline?.container) {
+      (viewer.timeline.container as HTMLDivElement).style.visibility = visible
+        ? "visible"
+        : "hidden";
+    }
+    viewer.forceResize();
+  }, [viewer, visible]);
+
+  return (
+    <Clock
+      shouldAnimate={animation}
+      startTime={startTime}
+      stopTime={stopTime}
+      currentTime={currentTime}
+      clockStep={clockStep}
+      multiplier={clockMultiplier}
+      clockRange={rangeType ? rangeTypes[rangeType] : undefined}
+      onTick={handleTick}
+    />
+  );
+}
+
+const rangeTypes = {
+  unbounded: ClockRange.UNBOUNDED,
+  clamped: ClockRange.CLAMPED,
+  bounced: ClockRange.LOOP_STOP,
+};
diff --git a/web/src/beta/core/engines/Cesium/core/Globe.tsx b/web/src/beta/core/engines/Cesium/core/Globe.tsx
new file mode 100644
index 0000000000..6e14a7eee1
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/core/Globe.tsx
@@ -0,0 +1,113 @@
+import {
+  ArcGISTiledElevationTerrainProvider,
+  CesiumTerrainProvider,
+  EllipsoidTerrainProvider,
+  IonResource,
+  TerrainProvider,
+} from "cesium";
+import { pick } from "lodash-es";
+import { useMemo } from "react";
+import { Globe as CesiumGlobe } from "resium";
+
+import { objKeys } from "@reearth/beta/utils/util";
+
+import type { SceneProperty, TerrainProperty } from "../..";
+
+export type Props = {
+  property?: SceneProperty;
+  cesiumIonAccessToken?: string;
+};
+
+export default function Globe({ property, cesiumIonAccessToken }: Props): JSX.Element | null {
+  const terrainProperty = useMemo(
+    (): TerrainProperty => ({
+      ...property?.terrain,
+      ...pick(property?.default, terrainPropertyKeys),
+    }),
+    [property?.terrain, property?.default],
+  );
+
+  const terrainProvider = useMemo((): TerrainProvider | undefined => {
+    const opts = {
+      terrain: terrainProperty?.terrain,
+      terrainType: terrainProperty?.terrainType,
+      terrainCesiumIonAccessToken:
+        terrainProperty?.terrainCesiumIonAccessToken || cesiumIonAccessToken,
+      terrainCesiumIonAsset: terrainProperty?.terrainCesiumIonAsset,
+      terrainCesiumIonUrl: terrainProperty?.terrainCesiumIonUrl,
+    };
+    const provider = opts.terrain ? terrainProviders[opts.terrainType || "cesium"] : undefined;
+    return (typeof provider === "function" ? provider(opts) : provider) ?? defaultTerrainProvider;
+  }, [
+    terrainProperty?.terrain,
+    terrainProperty?.terrainType,
+    terrainProperty?.terrainCesiumIonAccessToken,
+    terrainProperty?.terrainCesiumIonAsset,
+    terrainProperty?.terrainCesiumIonUrl,
+    cesiumIonAccessToken,
+  ]);
+
+  return (
+    <CesiumGlobe
+      enableLighting={!!property?.atmosphere?.enable_lighting}
+      showGroundAtmosphere={property?.atmosphere?.ground_atmosphere ?? true}
+      atmosphereSaturationShift={property?.atmosphere?.surturation_shift}
+      atmosphereHueShift={property?.atmosphere?.hue_shift}
+      atmosphereBrightnessShift={property?.atmosphere?.brightness_shift}
+      terrainProvider={terrainProvider}
+      depthTestAgainstTerrain={!!terrainProperty.depthTestAgainstTerrain}
+      terrainExaggerationRelativeHeight={terrainProperty.terrainExaggerationRelativeHeight}
+      terrainExaggeration={terrainProperty.terrainExaggeration}
+    />
+  );
+}
+
+const terrainPropertyKeys = objKeys<TerrainProperty>({
+  terrain: 0,
+  terrainType: 0,
+  terrainExaggeration: 0,
+  terrainExaggerationRelativeHeight: 0,
+  depthTestAgainstTerrain: 0,
+  terrainCesiumIonAsset: 0,
+  terrainCesiumIonAccessToken: 0,
+  terrainCesiumIonUrl: 0,
+  terrainUrl: 0,
+});
+
+const defaultTerrainProvider = new EllipsoidTerrainProvider();
+
+const terrainProviders: {
+  [k in NonNullable<TerrainProperty["terrainType"]>]:
+    | TerrainProvider
+    | ((
+        opts: Pick<
+          TerrainProperty,
+          "terrainCesiumIonAccessToken" | "terrainCesiumIonAsset" | "terrainCesiumIonUrl"
+        >,
+      ) => TerrainProvider | null);
+} = {
+  cesium: ({ terrainCesiumIonAccessToken }) =>
+    // https://github.com/CesiumGS/cesium/blob/main/Source/Core/createWorldTerrain.js
+    new CesiumTerrainProvider({
+      url: IonResource.fromAssetId(1, {
+        accessToken: terrainCesiumIonAccessToken,
+      }),
+      requestVertexNormals: false,
+      requestWaterMask: false,
+    }),
+  arcgis: () =>
+    new ArcGISTiledElevationTerrainProvider({
+      url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
+    }),
+  cesiumion: ({ terrainCesiumIonAccessToken, terrainCesiumIonAsset, terrainCesiumIonUrl }) =>
+    terrainCesiumIonAsset
+      ? new CesiumTerrainProvider({
+          url:
+            terrainCesiumIonUrl ||
+            IonResource.fromAssetId(parseInt(terrainCesiumIonAsset, 10), {
+              accessToken: terrainCesiumIonAccessToken,
+            }),
+          requestVertexNormals: true,
+        })
+      : null,
+};
diff --git a/web/src/beta/core/engines/Cesium/core/Imagery.test.ts b/web/src/beta/core/engines/Cesium/core/Imagery.test.ts
new file mode 100644
index 0000000000..60f67528b1
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/core/Imagery.test.ts
@@ -0,0 +1,103 @@
+import { renderHook } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+
+import { type Tile, useImageryProviders } from "./Imagery";
+
+test("useImageryProviders", () => {
+  const provider = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge: url }));
+  const provider2 = vi.fn(({ url }: { url?: string } = {}): any => ({ hoge2: url }));
+  const presets = { default: provider, foobar: provider2 };
+  const { result, rerender } = renderHook(
+    ({ tiles, cesiumIonAccessToken }: { tiles: Tile[]; cesiumIonAccessToken?: string }) =>
+      useImageryProviders({
+        tiles,
+        presets,
+        cesiumIonAccessToken,
+      }),
+    { initialProps: { tiles: [{ id: "1", tile_type: "default" }] } },
+  );
+
+  expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
+  expect(result.current.updated).toBe(true);
+  expect(provider).toBeCalledTimes(1);
+  const prevImageryProvider = result.current.providers["1"][2];
+
+  // re-render with same tiles
+  rerender({ tiles: [{ id: "1", tile_type: "default" }] });
+
+  expect(result.current.providers).toEqual({ "1": ["default", undefined, { hoge: undefined }] });
+  expect(result.current.updated).toBe(false);
+  expect(result.current.providers["1"][2]).toBe(prevImageryProvider); // 1's provider should be reused
+  expect(provider).toBeCalledTimes(1);
+
+  // update a tile URL
+  rerender({ tiles: [{ id: "1", tile_type: "default", tile_url: "a" }] });
+
+  expect(result.current.providers).toEqual({ "1": ["default", "a", { hoge: "a" }] });
+  expect(result.current.providers["1"][2]).not.toBe(prevImageryProvider);
+  expect(result.current.updated).toBe(true);
+  expect(provider).toBeCalledTimes(2);
+  expect(provider).toBeCalledWith({ url: "a" });
+  const prevImageryProvider2 = result.current.providers["1"][2];
+
+  // add a tile with URL
+  rerender({
+    tiles: [
+      { id: "2", tile_type: "default" },
+      { id: "1", tile_type: "default", tile_url: "a" },
+    ],
+  });
+
+  expect(result.current.providers).toEqual({
+    "2": ["default", undefined, { hoge: undefined }],
+    "1": ["default", "a", { hoge: "a" }],
+  });
+  expect(result.current.updated).toBe(true);
+  expect(result.current.providers["1"][2]).toBe(prevImageryProvider2); // 1's provider should be reused
+  expect(provider).toBeCalledTimes(3);
+
+  // sort tiles
+  rerender({
+    tiles: [
+      { id: "1", tile_type: "default", tile_url: "a" },
+      { id: "2", tile_type: "default" },
+    ],
+  });
+
+  expect(result.current.providers).toEqual({
+    "1": ["default", "a", { hoge: "a" }],
+    "2": ["default", undefined, { hoge: undefined }],
+  });
+  expect(result.current.updated).toBe(true);
+  expect(result.current.providers["1"][2]).toBe(prevImageryProvider2); // 1's provider should be reused
+  expect(provider).toBeCalledTimes(3);
+
+  // delete a tile
+  rerender({
+    tiles: [{ id: "1", tile_type: "default", tile_url: "a" }],
+    cesiumIonAccessToken: "a",
+  });
+
+  expect(result.current.providers).toEqual({
+    "1": ["default", "a", { hoge: "a" }],
+  });
+  expect(result.current.updated).toBe(true);
+  expect(result.current.providers["1"][2]).not.toBe(prevImageryProvider2);
+  expect(provider).toBeCalledTimes(4);
+
+  // update a tile type
+  rerender({
+    tiles: [{ id: "1", tile_type: "foobar", tile_url: "u" }],
+    cesiumIonAccessToken: "a",
+  });
+
+  expect(result.current.providers).toEqual({
+    "1": ["foobar", "u", { hoge2: "u" }],
+  });
+  expect(result.current.updated).toBe(true);
+  expect(provider).toBeCalledTimes(4);
+  expect(provider2).toBeCalledTimes(1);
+
+  rerender({ tiles: [] });
+  expect(result.current.providers).toEqual({});
+});
diff --git a/web/src/beta/core/engines/Cesium/core/Imagery.tsx b/web/src/beta/core/engines/Cesium/core/Imagery.tsx
new file mode 100644
index 0000000000..3985773fc4
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/core/Imagery.tsx
@@ -0,0 +1,156 @@
+import { ImageryProvider } from "cesium";
+import { isEqual } from "lodash-es";
+import { useCallback, useMemo, useRef, useLayoutEffect } from "react";
+import { ImageryLayer } from "resium";
+
+import { tiles as tilePresets } from "./presets";
+
+export type ImageryLayerData = {
+  id: string;
+  provider: ImageryProvider;
+  min?: number;
+  max?: number;
+  opacity?: number;
+};
+
+export type Tile = {
+  id: string;
+  tile_url?: string;
+  tile_type?: string;
+  tile_opacity?: number;
+  tile_minLevel?: number;
+  tile_maxLevel?: number;
+};
+
+export type Props = {
+  tiles?: Tile[];
+  cesiumIonAccessToken?: string;
+};
+
+export default function ImageryLayers({ tiles, cesiumIonAccessToken }: Props) {
+  const { providers, updated } = useImageryProviders({
+    tiles,
+    cesiumIonAccessToken,
+    presets: tilePresets,
+  });
+
+  // force rerendering all layers when any provider is updated
+  // since Resium does not sort layers according to ImageryLayer component order
+  const counter = useRef(0);
+  useLayoutEffect(() => {
+    if (updated) counter.current++;
+  }, [providers, updated]);
+
+  return (
+    <>
+      {tiles
+        ?.map(({ id, ...tile }) => ({ ...tile, id, provider: providers[id]?.[2] }))
+        .map(({ id, tile_opacity: opacity, tile_minLevel: min, tile_maxLevel: max, provider }, i) =>
+          provider ? (
+            <ImageryLayer
+              key={`${id}_${i}_${counter.current}`}
+              imageryProvider={provider}
+              minimumTerrainLevel={min}
+              maximumTerrainLevel={max}
+              alpha={opacity}
+              index={i}
+            />
+          ) : null,
+        )}
+    </>
+  );
+}
+
+type Providers = { [id: string]: [string | undefined, string | undefined, ImageryProvider] };
+
+export function useImageryProviders({
+  tiles = [],
+  cesiumIonAccessToken,
+  presets,
+}: {
+  tiles?: Tile[];
+  cesiumIonAccessToken?: string;
+  presets: {
+    [key: string]: (opts?: {
+      url?: string;
+      cesiumIonAccessToken?: string;
+    }) => ImageryProvider | null;
+  };
+}): { providers: Providers; updated: boolean } {
+  const newTile = useCallback(
+    (t: Tile, ciat?: string) =>
+      presets[t.tile_type || "default"]({ url: t.tile_url, cesiumIonAccessToken: ciat }),
+    [presets],
+  );
+
+  const prevCesiumIonAccessToken = useRef(cesiumIonAccessToken);
+  const tileKeys = tiles.map(t => t.id).join(",");
+  const prevTileKeys = useRef(tileKeys);
+  const prevProviders = useRef<Providers>({});
+
+  // Manage TileProviders so that TileProvider does not need to be recreated each time tiles are updated.
+  const { providers, updated } = useMemo(() => {
+    const isCesiumAccessTokenUpdated = prevCesiumIonAccessToken.current !== cesiumIonAccessToken;
+    const prevProvidersKeys = Object.keys(prevProviders.current);
+    const added = tiles.map(t => t.id).filter(t => t && !prevProvidersKeys.includes(t));
+
+    const rawProviders = [
+      ...Object.entries(prevProviders.current),
+      ...added.map(a => [a, undefined] as const),
+    ].map(([k, v]) => ({
+      key: k,
+      added: added.includes(k),
+      prevType: v?.[0],
+      prevUrl: v?.[1],
+      prevProvider: v?.[2],
+      tile: tiles.find(t => t.id === k),
+    }));
+
+    const providers = Object.fromEntries(
+      rawProviders
+        .map(
+          ({
+            key,
+            added,
+            prevType,
+            prevUrl,
+            prevProvider,
+            tile,
+          }):
+            | [string, [string | undefined, string | undefined, ImageryProvider | null | undefined]]
+            | null =>
+            !tile
+              ? null
+              : [
+                  key,
+                  added ||
+                  prevType !== tile.tile_type ||
+                  prevUrl !== tile.tile_url ||
+                  (isCesiumAccessTokenUpdated && (!tile.tile_type || tile.tile_type === "default"))
+                    ? [tile.tile_type, tile.tile_url, newTile(tile, cesiumIonAccessToken)]
+                    : [prevType, prevUrl, prevProvider],
+                ],
+        )
+        .filter(
+          (e): e is [string, [string | undefined, string | undefined, ImageryProvider]] =>
+            !!e?.[1][2],
+        ),
+    );
+
+    const updated =
+      !!added.length ||
+      !!isCesiumAccessTokenUpdated ||
+      !isEqual(prevTileKeys.current, tileKeys) ||
+      rawProviders.some(
+        p => p.tile && (p.prevType !== p.tile.tile_type || p.prevUrl !== p.tile.tile_url),
+      );
+
+    prevTileKeys.current = tileKeys;
+    prevCesiumIonAccessToken.current = cesiumIonAccessToken;
+
+    return { providers, updated };
+  }, [cesiumIonAccessToken, tiles, tileKeys, newTile]);
+
+  prevProviders.current = providers;
+  return { providers, updated };
+}
diff --git a/web/src/beta/core/engines/Cesium/core/Indicator.tsx b/web/src/beta/core/engines/Cesium/core/Indicator.tsx
new file mode 100644
index 0000000000..7ae61d2964
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/core/Indicator.tsx
@@ -0,0 +1,131 @@
+import useTransition, { TransitionStatus } from "@rot1024/use-transition";
+import { BoundingSphere, Cartesian3, SceneTransforms, Cartesian2 } from "cesium";
+import { useEffect, useState } from "react";
+import { useCesium } from "resium";
+
+import Icon from "@reearth/beta/components/Icon";
+import { styled } from "@reearth/services/theme";
+
+import type { SceneProperty } from "../..";
+import { useIcon } from "../common";
+
+export type Props = {
+  className?: string;
+  property?: SceneProperty;
+};
+
+export default function Indicator({ className, property }: Props): JSX.Element | null {
+  const { viewer } = useCesium();
+  const [isVisible, setIsVisible] = useState(true);
+  const [pos, setPos] = useState<Cartesian2>();
+
+  const transiton = useTransition(!!pos && isVisible, 500, {
+    mountOnEnter: true,
+    unmountOnExit: true,
+  });
+  const { indicator_type, indicator_image, indicator_image_scale } = property?.indicator ?? {};
+  const [img, w, h] = useIcon({ image: indicator_image, imageSize: indicator_image_scale });
+
+  useEffect(() => {
+    !(!indicator_type || indicator_type === "default")
+      ? viewer?.selectionIndicator.viewModel.selectionIndicatorElement.setAttribute(
+          "hidden",
+          "true",
+        )
+      : viewer?.selectionIndicator.viewModel.selectionIndicatorElement.removeAttribute("hidden");
+  }, [indicator_type, viewer, viewer?.selectionIndicator]);
+
+  useEffect(() => {
+    if (!viewer) return;
+    const handleTick = () => {
+      if (viewer.isDestroyed()) return;
+      const selected = viewer.selectedEntity;
+      if (
+        !selected?.isShowing ||
+        !selected.isAvailable(viewer.clock.currentTime) ||
+        !selected.position
+      ) {
+        setIsVisible(false);
+        return;
+      }
+
+      // https://github.com/CesiumGS/cesium/blob/1.94/Source/Widgets/Viewer/Viewer.js#L1839
+      let position: Cartesian3 | undefined = undefined;
+      const boundingSphere = new BoundingSphere();
+      const state = (viewer.dataSourceDisplay as any).getBoundingSphere(
+        selected,
+        true,
+        boundingSphere,
+      );
+      // https://github.com/CesiumGS/cesium/blob/main/Source/DataSources/BoundingSphereState.js#L24
+      if (state !== 2 /* BoundingSphereState.FAILED */) {
+        position = boundingSphere.center;
+      } else if (selected.position) {
+        position = selected.position.getValue(viewer.clock.currentTime, position);
+      }
+
+      if (position) {
+        const pos = SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, position);
+        setPos(pos);
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    viewer.clock.onTick.addEventListener(handleTick);
+    return () => {
+      if (viewer.isDestroyed()) return;
+      viewer.clock.onTick.removeEventListener(handleTick);
+    };
+  }, [viewer]);
+
+  return transiton !== "unmounted" && pos ? (
+    indicator_type === "crosshair" ? (
+      <StyledIcon
+        icon="crosshair"
+        size="48px"
+        className={className}
+        transition={transiton}
+        style={{ left: pos.x + "px", top: pos.y + "px" }}
+      />
+    ) : indicator_type === "custom" ? (
+      <Image
+        src={img}
+        width={w}
+        height={h}
+        transition={transiton}
+        style={{ left: pos.x + "px", top: pos.y + "px" }}
+      />
+    ) : (
+      <StyledIndicator transition={transiton} style={{ left: pos.x + "px", top: pos.y + "px" }} />
+    )
+  ) : null;
+}
+
+const StyledIndicator = styled.div<{ transition: TransitionStatus }>`
+  position: absolute;
+  transform: translate(-50%, -50%);
+  transition: ${({ transition }) =>
+    transition === "entering" || transition === "exiting" ? "all 0.5s ease" : ""};
+  opacity: ${({ transition }) => (transition === "entering" || transition === "entered" ? 1 : 0)};
+  pointer-events: none;
+`;
+
+const StyledIcon = styled(Icon)<{ transition: TransitionStatus }>`
+  position: absolute;
+  transform: translate(-50%, -50%);
+  transition: ${({ transition }) =>
+    transition === "entering" || transition === "exiting" ? "all 0.5s ease" : ""};
+  opacity: ${({ transition }) => (transition === "entering" || transition === "entered" ? 1 : 0)};
+  pointer-events: none;
+`;
+
+const Image = styled.img<{ transition: TransitionStatus }>`
+  position: absolute;
+  transform: translate(-50%, -50%);
+  transition: ${({ transition }) =>
+    transition === "entering" || transition === "exiting" ? "all 0.5s ease" : ""};
+  opacity: ${({ transition }) => (transition === "entering" || transition === "entered" ? 1 : 0)};
+  pointer-events: none;
+`;
diff --git a/web/src/beta/core/engines/Cesium/core/presets.ts b/web/src/beta/core/engines/Cesium/core/presets.ts
new file mode 100644
index 0000000000..aa8cecd41e
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/core/presets.ts
@@ -0,0 +1,58 @@
+import {
+  ImageryProvider,
+  ArcGisMapServerImageryProvider,
+  IonImageryProvider,
+  OpenStreetMapImageryProvider,
+  IonWorldImageryStyle,
+  UrlTemplateImageryProvider,
+} from "cesium";
+
+export const tiles = {
+  default: ({ cesiumIonAccessToken } = {}) =>
+    new IonImageryProvider({
+      assetId: IonWorldImageryStyle.AERIAL,
+      accessToken: cesiumIonAccessToken,
+    }),
+  default_label: ({ cesiumIonAccessToken } = {}) =>
+    new IonImageryProvider({
+      assetId: IonWorldImageryStyle.AERIAL_WITH_LABELS,
+      accessToken: cesiumIonAccessToken,
+    }),
+  default_road: ({ cesiumIonAccessToken } = {}) =>
+    new IonImageryProvider({
+      assetId: IonWorldImageryStyle.ROAD,
+      accessToken: cesiumIonAccessToken,
+    }),
+  stamen_watercolor: () =>
+    new OpenStreetMapImageryProvider({
+      url: "https://stamen-tiles.a.ssl.fastly.net/watercolor/",
+      credit: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
+    }),
+  stamen_toner: () =>
+    new OpenStreetMapImageryProvider({
+      url: "https://stamen-tiles.a.ssl.fastly.net/toner/",
+      credit: "Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.",
+    }),
+  open_street_map: () =>
+    new OpenStreetMapImageryProvider({
+      url: "https://a.tile.openstreetmap.org/",
+      credit:
+        "Copyright: Tiles © Esri — Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012",
+    }),
+  esri_world_topo: () =>
+    new ArcGisMapServerImageryProvider({
+      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
+      credit:
+        "Copyright: Tiles © Esri — Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Communit",
+      enablePickFeatures: false,
+    }),
+  black_marble: ({ cesiumIonAccessToken } = {}) =>
+    new IonImageryProvider({ assetId: 3812, accessToken: cesiumIonAccessToken }),
+  japan_gsi_standard: () =>
+    new OpenStreetMapImageryProvider({
+      url: "https://cyberjapandata.gsi.go.jp/xyz/std/",
+    }),
+  url: ({ url } = {}) => (url ? new UrlTemplateImageryProvider({ url }) : null),
+} as {
+  [key: string]: (opts?: { url?: string; cesiumIonAccessToken?: string }) => ImageryProvider | null;
+};
diff --git a/web/src/beta/core/engines/Cesium/hooks.ts b/web/src/beta/core/engines/Cesium/hooks.ts
new file mode 100644
index 0000000000..b9468bbb72
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/hooks.ts
@@ -0,0 +1,641 @@
+import {
+  Color,
+  Entity,
+  Cesium3DTileFeature,
+  Cartesian3,
+  Ion,
+  Cesium3DTileset,
+  JulianDate,
+  Cesium3DTilePointFeature,
+  Model,
+  Cartographic,
+  SunLight,
+  DirectionalLight,
+} from "cesium";
+import type { Viewer as CesiumViewer } from "cesium";
+import CesiumDnD, { Context } from "cesium-dnd";
+import { isEqual } from "lodash-es";
+import { RefObject, useCallback, useEffect, useMemo, useRef } from "react";
+import type { CesiumComponentRef, CesiumMovementEvent, RootEventTarget } from "resium";
+import { useCustomCompareCallback } from "use-custom-compare";
+
+import { ComputedFeature, DataType, SelectedFeatureInfo } from "@reearth/beta/core/mantle";
+import { LayersRef } from "@reearth/beta/core/Map";
+import { e2eAccessToken, setE2ECesiumViewer } from "@reearth/services/config";
+
+import type {
+  Camera,
+  LatLng,
+  LayerSelectionReason,
+  EngineRef,
+  SceneProperty,
+  MouseEvent,
+  MouseEvents,
+  LayerEditEvent,
+} from "..";
+
+import { useCameraLimiter } from "./cameraLimiter";
+import { getCamera, isDraggable, isSelectable, getLocationFromScreen } from "./common";
+import { getTag, type Context as FeatureContext } from "./Feature";
+import { InternalCesium3DTileFeature } from "./types";
+import useEngineRef from "./useEngineRef";
+import { convertCartesian3ToPosition, findEntity, getEntityContent } from "./utils";
+
+export default ({
+  ref,
+  property,
+  camera,
+  selectedLayerId,
+  selectionReason,
+  isLayerDraggable,
+  meta,
+  layersRef,
+  onLayerSelect,
+  onCameraChange,
+  onLayerDrag,
+  onLayerDrop,
+  onLayerEdit,
+}: {
+  ref: React.ForwardedRef<EngineRef>;
+  property?: SceneProperty;
+  camera?: Camera;
+  selectedLayerId?: {
+    layerId?: string;
+    featureId?: string;
+  };
+  layersRef?: RefObject<LayersRef>;
+  selectionReason?: LayerSelectionReason;
+  isLayerDraggable?: boolean;
+  meta?: Record<string, unknown>;
+  onLayerSelect?: (
+    layerId?: string,
+    featureId?: string,
+    options?: LayerSelectionReason,
+    info?: SelectedFeatureInfo,
+  ) => void;
+  onCameraChange?: (camera: Camera) => void;
+  onLayerDrag?: (layerId: string, featureId: string | undefined, position: LatLng) => void;
+  onLayerDrop?: (
+    layerId: string,
+    featureId: string | undefined,
+    position: LatLng | undefined,
+  ) => void;
+  onLayerEdit?: (e: LayerEditEvent) => void;
+}) => {
+  const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
+  const cesiumIonDefaultAccessToken =
+    typeof meta?.cesiumIonAccessToken === "string" && meta.cesiumIonAccessToken
+      ? meta.cesiumIonAccessToken
+      : Ion.defaultAccessToken;
+  const cesiumIonAccessToken = property?.default?.ion || cesiumIonDefaultAccessToken;
+
+  // expose ref
+  const engineAPI = useEngineRef(ref, cesium);
+
+  const backgroundColor = useMemo(
+    () =>
+      property?.default?.bgcolor ? Color.fromCssColorString(property.default.bgcolor) : undefined,
+    [property?.default?.bgcolor],
+  );
+
+  const light = useMemo(() => {
+    let light;
+    if (property?.light?.lightType === "sunLight") {
+      light = new SunLight({
+        color: property.light?.lightColor
+          ? Color.fromCssColorString(property.light.lightColor)
+          : undefined,
+        intensity: property.light?.lightIntensity,
+      });
+    } else if (property?.light?.lightType === "directionalLight") {
+      light = new DirectionalLight({
+        direction: new Cartesian3(
+          property?.light?.lightDirectionX ?? 1,
+          property?.light?.lightDirectionY ?? 0,
+          property?.light?.lightDirectionZ ?? 0,
+        ),
+        color: property.light?.lightColor
+          ? Color.fromCssColorString(property.light.lightColor)
+          : undefined,
+        intensity: property.light?.lightIntensity,
+      });
+    }
+    return light;
+  }, [
+    property?.light?.lightType,
+    property?.light?.lightColor,
+    property?.light?.lightDirectionX,
+    property?.light?.lightDirectionY,
+    property?.light?.lightDirectionZ,
+    property?.light?.lightIntensity,
+  ]);
+
+  useEffect(() => {
+    engineAPI.changeSceneMode(property?.default?.sceneMode, 0);
+  }, [property?.default?.sceneMode, engineAPI]);
+
+  // move to initial position at startup
+  const initialCameraFlight = useRef(false);
+
+  const handleMount = useCustomCompareCallback(
+    () => {
+      if (initialCameraFlight.current) return;
+      initialCameraFlight.current = true;
+      if (
+        property?.cameraLimiter?.cameraLimitterEnabled &&
+        property?.cameraLimiter?.cameraLimitterTargetArea
+      ) {
+        engineAPI.flyTo(property?.cameraLimiter?.cameraLimitterTargetArea, { duration: 0 });
+      } else if (property?.default?.camera) {
+        engineAPI.flyTo(property.default.camera, { duration: 0 });
+      }
+      const camera = getCamera(cesium?.current?.cesiumElement);
+      if (camera) {
+        onCameraChange?.(camera);
+      }
+    },
+    [
+      engineAPI,
+      onCameraChange,
+      property?.default?.camera,
+      property?.cameraLimiter?.cameraLimitterEnabled,
+    ],
+    (prevDeps, nextDeps) =>
+      prevDeps[0] === nextDeps[0] &&
+      prevDeps[1] === nextDeps[1] &&
+      isEqual(prevDeps[2], nextDeps[2]) &&
+      prevDeps[3] === nextDeps[3],
+  );
+
+  const handleUnmount = useCallback(() => {
+    initialCameraFlight.current = false;
+  }, []);
+
+  // cache the camera data emitted from viewer camera change
+  const emittedCamera = useRef<Camera[]>([]);
+  const updateCamera = useCallback(() => {
+    const viewer = cesium?.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed() || !onCameraChange) return;
+
+    const c = getCamera(viewer);
+    if (c && !isEqual(c, camera)) {
+      emittedCamera.current.push(c);
+      // The state change is not sync now. This number is how many state updates can actually happen to be merged within one re-render.
+      if (emittedCamera.current.length > 10) {
+        emittedCamera.current.shift();
+      }
+      onCameraChange?.(c);
+    }
+  }, [camera, onCameraChange]);
+
+  const handleCameraChange = useCallback(() => {
+    updateCamera();
+  }, [updateCamera]);
+
+  const handleCameraMoveEnd = useCallback(() => {
+    updateCamera();
+  }, [updateCamera]);
+
+  useEffect(() => {
+    if (camera && !emittedCamera.current.includes(camera)) {
+      engineAPI.flyTo(camera, { duration: 0 });
+      emittedCamera.current = [];
+    }
+  }, [camera, engineAPI]);
+
+  const prevSelectedEntity = useRef<Entity | Cesium3DTileset | InternalCesium3DTileFeature>();
+  // manage layer selection
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+
+    const prevTag = getTag(prevSelectedEntity.current);
+    if (
+      (!prevTag?.featureId &&
+        prevTag?.layerId &&
+        selectedLayerId?.layerId &&
+        prevTag?.layerId === selectedLayerId.layerId) ||
+      (prevTag?.featureId &&
+        selectedLayerId?.featureId &&
+        prevTag?.featureId === selectedLayerId.featureId)
+    )
+      return;
+
+    const entity =
+      findEntity(viewer, undefined, selectedLayerId?.featureId) ||
+      findEntity(viewer, selectedLayerId?.layerId);
+    if (!entity || entity instanceof Entity) {
+      viewer.selectedEntity = entity;
+    }
+    if (prevSelectedEntity.current === entity) return;
+    prevSelectedEntity.current = entity;
+
+    if (!entity && selectedLayerId?.featureId) {
+      // Find ImageryLayerFeature
+      const ImageryLayerDataTypes: DataType[] = ["mvt"];
+      const layers = layersRef?.current?.findAll(
+        layer =>
+          layer.type === "simple" &&
+          !!layer.data?.type &&
+          ImageryLayerDataTypes.includes(layer.data?.type),
+      );
+
+      if (layers?.length) {
+        // TODO: Get ImageryLayerFeature from `viewer.imageryLayers`.(But currently didn't find the way)
+        const [feature, layerId] =
+          ((): [ComputedFeature, string] | void => {
+            for (const layer of layers) {
+              const f = layer.computed?.features.find(
+                feature => feature.id !== selectedLayerId?.featureId,
+              );
+              if (f) {
+                return [f, layer.id];
+              }
+            }
+          })() || [];
+        onLayerSelect?.(layerId, feature?.id);
+      }
+    }
+
+    const tag = getTag(entity);
+    if (tag?.unselectable) return;
+
+    if (entity && entity instanceof Cesium3DTileFeature) {
+      const tag = getTag(entity);
+      if (tag) {
+        const content = tileProperties(entity);
+        onLayerSelect?.(
+          tag.layerId,
+          String(tag.featureId),
+          content.length
+            ? {
+                defaultInfobox: {
+                  title: entity.getProperty("name"),
+                  content: {
+                    type: "table",
+                    value: content,
+                  },
+                },
+              }
+            : undefined,
+          { feature: tag.computedFeature },
+        );
+      }
+      return;
+    }
+
+    if (entity) {
+      const layer = tag?.layerId
+        ? layersRef?.current?.overriddenLayers().find(l => l.id === tag.layerId) ??
+          layersRef?.current?.findById(tag.layerId)
+        : undefined;
+      // Sometimes only featureId is specified, so we need to sync entity tag.
+      onLayerSelect?.(
+        tag?.layerId,
+        tag?.featureId,
+        entity instanceof Entity && (entity.description || entity.properties)
+          ? {
+              defaultInfobox: {
+                title: entity.name,
+                content: getEntityContent(
+                  entity,
+                  cesium.current?.cesiumElement?.clock.currentTime ?? new JulianDate(),
+                  tag?.layerId ? layer?.infobox?.property?.default?.defaultContent : undefined,
+                ),
+              },
+            }
+          : undefined,
+      );
+    }
+  }, [cesium, selectedLayerId, onLayerSelect, layersRef]);
+
+  const handleMouseEvent = useCallback(
+    (type: keyof MouseEvents, e: CesiumMovementEvent, target: RootEventTarget) => {
+      if (engineAPI.mouseEventCallbacks[type]) {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        const position = e.position || e.startPosition;
+        const props: MouseEvent = {
+          x: position?.x,
+          y: position?.y,
+          ...(position
+            ? getLocationFromScreen(viewer.scene, position.x, position.y, true) ?? {}
+            : {}),
+        };
+        const layerId = getLayerId(target);
+        if (layerId) props.layerId = layerId;
+        engineAPI.mouseEventCallbacks[type]?.(props);
+      }
+    },
+    [engineAPI],
+  );
+
+  const handleMouseWheel = useCallback(
+    (delta: number) => {
+      engineAPI.mouseEventCallbacks.wheel?.({ delta });
+    },
+    [engineAPI],
+  );
+
+  const mouseEventHandles = useMemo(() => {
+    const mouseEvents: { [index in keyof MouseEvents]: undefined | any } = {
+      click: undefined,
+      doubleclick: undefined,
+      mousedown: undefined,
+      mouseup: undefined,
+      rightclick: undefined,
+      rightdown: undefined,
+      rightup: undefined,
+      middleclick: undefined,
+      middledown: undefined,
+      middleup: undefined,
+      mousemove: undefined,
+      mouseenter: undefined,
+      mouseleave: undefined,
+      wheel: undefined,
+    };
+    (Object.keys(mouseEvents) as (keyof MouseEvents)[]).forEach(type => {
+      mouseEvents[type] =
+        type === "wheel"
+          ? (delta: number) => {
+              handleMouseWheel(delta);
+            }
+          : (e: CesiumMovementEvent, target: RootEventTarget) => {
+              handleMouseEvent(type as keyof MouseEvents, e, target);
+            };
+    });
+    return mouseEvents;
+  }, [handleMouseEvent, handleMouseWheel]);
+
+  const handleClick = useCallback(
+    async (e: CesiumMovementEvent, target: RootEventTarget) => {
+      mouseEventHandles.click?.(e, target);
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed()) return;
+
+      if (target && "id" in target && target.id instanceof Entity && isSelectable(target.id)) {
+        const tag = getTag(target.id);
+        const layer = tag?.layerId
+          ? layersRef?.current?.overriddenLayers().find(l => l.id === tag.layerId) ??
+            layersRef?.current?.findById(tag.layerId)
+          : undefined;
+        onLayerSelect?.(
+          tag?.layerId,
+          tag?.featureId,
+          !!target.id.description || !!target.id.properties
+            ? {
+                defaultInfobox: {
+                  title: layer?.title ?? target.id.name,
+                  content: getEntityContent(
+                    target.id,
+                    viewer.clock.currentTime ?? new JulianDate(),
+                    tag?.layerId ? layer?.infobox?.property?.default?.defaultContent : undefined,
+                  ),
+                },
+              }
+            : undefined,
+        );
+        prevSelectedEntity.current = target.id;
+        viewer.selectedEntity = target.id;
+        return;
+      }
+
+      if (
+        target &&
+        (target instanceof Cesium3DTileFeature || target instanceof Cesium3DTilePointFeature)
+      ) {
+        const tag = getTag(target);
+        if (tag) {
+          const content = tileProperties(target);
+          onLayerSelect?.(
+            tag.layerId,
+            String(tag.featureId),
+            content.length
+              ? {
+                  defaultInfobox: {
+                    title: target.getProperty("name"),
+                    content: {
+                      type: "table",
+                      value: tileProperties(target),
+                    },
+                  },
+                }
+              : undefined,
+            { feature: tag.computedFeature },
+          );
+          prevSelectedEntity.current = target;
+        }
+        return;
+      }
+
+      if (
+        target &&
+        "content" in target &&
+        target.content &&
+        typeof target.content === "object" &&
+        "_model" in target.content &&
+        target.content._model instanceof Model
+      ) {
+        const model = target.content._model;
+        const tag = getTag(model);
+        if (tag) {
+          onLayerSelect?.(tag.layerId, String(tag.featureId));
+          prevSelectedEntity.current = model;
+        }
+        return;
+      }
+
+      // Check imagery layer
+      // ref: https://github.com/CesiumGS/cesium/blob/96b978e0c53aba3bc4f1191111e0be61781ae9dd/packages/widgets/Source/Viewer/Viewer.js#L167
+      if (target === undefined && e.position) {
+        const scene = viewer.scene;
+        const pickRay = scene.camera.getPickRay(e.position);
+
+        if (pickRay) {
+          const l = await scene.imageryLayers.pickImageryLayerFeatures(pickRay, scene);
+          if (l && !!l.length) {
+            l.map(f => {
+              const appearanceType = f.data?.appearanceType;
+              if (appearanceType && f.data?.feature?.[appearanceType]?.show === false) {
+                return;
+              }
+
+              const pos = f.position;
+              if (pos) {
+                // NOTE: Instantiate temporal Cesium.Entity to display indicator.
+                // Although we want to use `viewer.selectionIndicator.viewModel.position` and `animateAppear`, Cesium reset selection position if `viewer.selectedEntity` is not set.
+                // ref: https://github.com/CesiumGS/cesium/blob/9295450e64c3077d96ad579012068ea05f97842c/packages/widgets/Source/Viewer/Viewer.js#L1843-L1876
+                // issue: https://github.com/CesiumGS/cesium/issues/7965
+                requestAnimationFrame(() => {
+                  viewer.selectedEntity = new Entity({
+                    position: Cartographic.toCartesian(pos),
+                  });
+                });
+              }
+
+              const tag = getTag(f.imageryLayer);
+              const layer = tag?.layerId
+                ? layersRef?.current?.overriddenLayers().find(l => l.id === tag.layerId) ??
+                  layersRef?.current?.findById(tag.layerId)
+                : undefined;
+              const content = getEntityContent(
+                f.data.feature ?? f,
+                viewer.clock.currentTime ?? new JulianDate(),
+                tag?.layerId ? layer?.infobox?.property?.default?.defaultContent : undefined,
+              );
+              onLayerSelect?.(
+                f.data.layerId,
+                f.data.featureId,
+                content.value.length
+                  ? {
+                      defaultInfobox: {
+                        title: layer?.title ?? f.name,
+                        content,
+                      },
+                    }
+                  : undefined,
+                {
+                  feature: f.data.feature,
+                },
+              );
+            });
+            return;
+          }
+        }
+      }
+
+      viewer.selectedEntity = undefined;
+      onLayerSelect?.();
+    },
+    [onLayerSelect, mouseEventHandles, layersRef],
+  );
+
+  // E2E test
+  useEffect(() => {
+    if (e2eAccessToken()) {
+      setE2ECesiumViewer(cesium.current?.cesiumElement);
+      return () => {
+        setE2ECesiumViewer(undefined);
+      };
+    }
+    return;
+  }, [cesium.current?.cesiumElement]);
+
+  // update
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+    viewer.scene.requestRender();
+  });
+
+  const handleUpdate = useCallback(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+    viewer.scene.requestRender();
+  }, []);
+
+  // enable Drag and Drop Layers
+  const handleLayerDrag = useCallback(
+    (e: Entity, position: Cartesian3 | undefined, _context: Context): boolean | void => {
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed() || !isSelectable(e) || !isDraggable(e)) return false;
+
+      const pos = convertCartesian3ToPosition(cesium.current?.cesiumElement, position);
+      if (!pos) return false;
+
+      const tag = getTag(e);
+      if (!tag) return false;
+
+      onLayerDrag?.(tag.layerId || "", tag.featureId, pos);
+    },
+    [onLayerDrag],
+  );
+
+  const handleLayerDrop = useCallback(
+    (e: Entity, position: Cartesian3 | undefined): boolean | void => {
+      const viewer = cesium.current?.cesiumElement;
+      if (!viewer || viewer.isDestroyed()) return false;
+
+      const tag = getTag(e);
+      const pos = convertCartesian3ToPosition(cesium.current?.cesiumElement, position);
+      onLayerDrop?.(tag?.layerId || "", tag?.featureId || "", pos);
+
+      return false; // let apollo-client handle optimistic updates
+    },
+    [onLayerDrop],
+  );
+
+  const cesiumDnD = useRef<CesiumDnD>();
+  useEffect(() => {
+    const viewer = cesium.current?.cesiumElement;
+    if (!viewer || viewer.isDestroyed()) return;
+    cesiumDnD.current = new CesiumDnD(viewer, {
+      onDrag: handleLayerDrag,
+      onDrop: handleLayerDrop,
+      dragDelay: 1000,
+      initialDisabled: !isLayerDraggable,
+    });
+    return () => {
+      if (!viewer || viewer.isDestroyed()) return;
+      cesiumDnD.current?.disable();
+    };
+  }, [handleLayerDrag, handleLayerDrop, isLayerDraggable]);
+  const { cameraViewBoundaries, cameraViewOuterBoundaries, cameraViewBoundariesMaterial } =
+    useCameraLimiter(cesium, camera, property?.cameraLimiter);
+
+  const context = useMemo<FeatureContext>(
+    () => ({
+      selectionReason,
+      flyTo: engineAPI.flyTo,
+      getCamera: engineAPI.getCamera,
+      onLayerEdit,
+    }),
+    [selectionReason, engineAPI, onLayerEdit],
+  );
+
+  const handleTick = useCallback(
+    (d: Date, clock: { start: Date; stop: Date }) => {
+      engineAPI.tickEventCallback?.current?.forEach(e => e(d, clock));
+    },
+    [engineAPI],
+  );
+
+  return {
+    backgroundColor,
+    cesium,
+    cameraViewBoundaries,
+    cameraViewOuterBoundaries,
+    cameraViewBoundariesMaterial,
+    cesiumIonAccessToken,
+    mouseEventHandles,
+    context,
+    light,
+    handleMount,
+    handleUnmount,
+    handleUpdate,
+    handleClick,
+    handleCameraChange,
+    handleCameraMoveEnd,
+    handleTick,
+  };
+};
+
+function tileProperties(
+  t: Cesium3DTileFeature | Cesium3DTilePointFeature,
+): { key: string; value: any }[] {
+  return t
+    .getPropertyIds()
+    .reduce<{ key: string; value: any }[]>(
+      (a, b) => [...a, { key: b, value: t.getProperty(b) }],
+      [],
+    );
+}
+
+function getLayerId(target: RootEventTarget): string | undefined {
+  if (target && "id" in target && target.id instanceof Entity) {
+    return getTag(target.id)?.layerId;
+  } else if (target && target instanceof Cesium3DTileFeature) {
+    return getTag(target.tileset)?.layerId;
+  }
+  return undefined;
+}
diff --git a/web/src/beta/core/engines/Cesium/index.stories.tsx b/web/src/beta/core/engines/Cesium/index.stories.tsx
new file mode 100644
index 0000000000..891a24f796
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/index.stories.tsx
@@ -0,0 +1,42 @@
+import { Meta, Story } from "@storybook/react";
+
+import Component, { Props } from "../../Map";
+
+import { engine } from ".";
+
+export default {
+  component: Component,
+  parameters: { actions: { argTypesRegex: "^on.*" } },
+} as Meta;
+
+const Template: Story<Props> = args => <Component {...args} />;
+
+export const Default = Template.bind([]);
+Default.args = {
+  engine: "cesium",
+  engines: {
+    cesium: engine,
+  },
+  ready: true,
+  layers: [
+    {
+      id: "l",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: { type: "Feature", geometry: { type: "Point", coordinates: [0, 0] } },
+      },
+      marker: {
+        imageColor: "#fff",
+      },
+    },
+  ],
+  property: {
+    tiles: [
+      {
+        id: "default",
+        tile_type: "default",
+      },
+    ],
+  },
+};
diff --git a/web/src/beta/core/engines/Cesium/index.tsx b/web/src/beta/core/engines/Cesium/index.tsx
new file mode 100644
index 0000000000..bcca97f69d
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/index.tsx
@@ -0,0 +1,207 @@
+import { ArcType, Color, ScreenSpaceEventType } from "cesium";
+import React, { forwardRef } from "react";
+import {
+  Viewer,
+  Fog,
+  Sun,
+  SkyAtmosphere,
+  Scene,
+  SkyBox,
+  Camera,
+  ScreenSpaceEventHandler,
+  ScreenSpaceEvent,
+  ScreenSpaceCameraController,
+  Entity,
+  PolylineGraphics,
+} from "resium";
+
+import type { Engine, EngineProps, EngineRef } from "..";
+
+import Cluster from "./Cluster";
+import Clock from "./core/Clock";
+import Globe from "./core/Globe";
+import ImageryLayers from "./core/Imagery";
+import Indicator from "./core/Indicator";
+import Event from "./Event";
+import Feature, { context as featureContext } from "./Feature";
+import useHooks from "./hooks";
+
+const Cesium: React.ForwardRefRenderFunction<EngineRef, EngineProps> = (
+  {
+    className,
+    style,
+    property,
+    overriddenClock,
+    camera,
+    small,
+    ready,
+    children,
+    selectedLayerId,
+    isLayerDraggable,
+    isLayerDragging,
+    shouldRender: _shouldRender,
+    layerSelectionReason,
+    meta,
+    layersRef,
+    onLayerSelect,
+    onCameraChange,
+    onLayerDrag,
+    onLayerDrop,
+    onLayerEdit,
+  },
+  ref,
+) => {
+  const {
+    backgroundColor,
+    cesium,
+    cameraViewBoundaries,
+    cameraViewOuterBoundaries,
+    cameraViewBoundariesMaterial,
+    mouseEventHandles,
+    cesiumIonAccessToken,
+    context,
+    light,
+    handleMount,
+    handleUnmount,
+    handleUpdate,
+    handleClick,
+    handleCameraChange,
+    handleCameraMoveEnd,
+    handleTick,
+  } = useHooks({
+    ref,
+    property,
+    camera,
+    selectedLayerId,
+    selectionReason: layerSelectionReason,
+    isLayerDraggable,
+    meta,
+    layersRef,
+    onLayerSelect,
+    onCameraChange,
+    onLayerDrag,
+    onLayerDrop,
+    onLayerEdit,
+  });
+
+  return (
+    <Viewer
+      ref={cesium}
+      onUpdate={handleUpdate}
+      className={className}
+      animation
+      timeline
+      // NOTE: We need to update cesium ion token dynamically.
+      // To replace old imagery provider, we need to remove old imagery provider.
+      imageryProvider={false}
+      fullscreenButton={false}
+      homeButton={false}
+      geocoder={false}
+      infoBox={false}
+      baseLayerPicker={false}
+      navigationHelpButton={false}
+      projectionPicker={false}
+      sceneModePicker={false}
+      creditContainer={creditContainer}
+      style={{
+        width: small ? "300px" : "auto",
+        height: small ? "300px" : "100%",
+        display: ready ? undefined : "none",
+        cursor: isLayerDragging ? "grab" : undefined,
+        ...style,
+      }}
+      // NOTE: Need to disable requestRenderMode on NLS, because we need to attach style dynamically.
+      //       If we want to use requestRenderMode, we need to add requestRenderMode option to sceneProperty.
+      // requestRenderMode={!property?.timeline?.animation && !isLayerDraggable && !shouldRender}
+      // maximumRenderTimeChange={
+      //   !property?.timeline?.animation && !isLayerDraggable && !shouldRender ? Infinity : undefined
+      // }
+      shadows={!!property?.atmosphere?.shadows}
+      onClick={handleClick}
+      onDoubleClick={mouseEventHandles.doubleclick}
+      onMouseDown={mouseEventHandles.mousedown}
+      onMouseUp={mouseEventHandles.mouseup}
+      onRightClick={mouseEventHandles.rightclick}
+      onRightDown={mouseEventHandles.rightdown}
+      onRightUp={mouseEventHandles.rightup}
+      onMiddleClick={mouseEventHandles.middleclick}
+      onMiddleDown={mouseEventHandles.middledown}
+      onMiddleUp={mouseEventHandles.middleup}
+      onMouseMove={mouseEventHandles.mousemove}
+      onMouseEnter={mouseEventHandles.mouseenter}
+      onMouseLeave={mouseEventHandles.mouseleave}
+      onWheel={mouseEventHandles.wheel}>
+      <Event onMount={handleMount} onUnmount={handleUnmount} />
+      <Clock property={property} clock={overriddenClock} onTick={handleTick} />
+      <ImageryLayers tiles={property?.tiles} cesiumIonAccessToken={cesiumIonAccessToken} />
+      <Indicator property={property} />
+      <ScreenSpaceEventHandler useDefault>
+        {/* remove default click event */}
+        <ScreenSpaceEvent type={ScreenSpaceEventType.LEFT_CLICK} />
+        {/* remove default double click event */}
+        <ScreenSpaceEvent type={ScreenSpaceEventType.LEFT_DOUBLE_CLICK} />
+      </ScreenSpaceEventHandler>
+      <ScreenSpaceCameraController
+        maximumZoomDistance={
+          property?.cameraLimiter?.cameraLimitterEnabled
+            ? property.cameraLimiter?.cameraLimitterTargetArea?.height ?? Number.POSITIVE_INFINITY
+            : Number.POSITIVE_INFINITY
+        }
+        enableCollisionDetection={!property?.default?.allowEnterGround}
+      />
+      <Camera
+        onChange={handleCameraChange}
+        percentageChanged={0.2}
+        onMoveEnd={handleCameraMoveEnd}
+      />
+      {cameraViewBoundaries && property?.cameraLimiter?.cameraLimitterShowHelper && (
+        <Entity>
+          <PolylineGraphics
+            positions={cameraViewBoundaries}
+            width={1}
+            material={Color.RED}
+            arcType={ArcType.RHUMB}
+          />
+        </Entity>
+      )}
+      {cameraViewOuterBoundaries && property?.cameraLimiter?.cameraLimitterShowHelper && (
+        <Entity>
+          <PolylineGraphics
+            positions={cameraViewOuterBoundaries}
+            width={1}
+            material={cameraViewBoundariesMaterial}
+            arcType={ArcType.RHUMB}
+          />
+        </Entity>
+      )}
+      {/* NOTE: useWebVR={false} will crash Cesium */}
+      <Scene
+        backgroundColor={backgroundColor}
+        useWebVR={!!property?.default?.vr || undefined}
+        light={light}
+      />
+      <SkyBox show={property?.default?.skybox ?? true} />
+      <Fog
+        enabled={property?.atmosphere?.fog ?? true}
+        density={property?.atmosphere?.fog_density}
+      />
+      <Sun show={property?.atmosphere?.enable_sun ?? true} />
+      <SkyAtmosphere show={property?.atmosphere?.sky_atmosphere ?? true} />
+      <Globe property={property} cesiumIonAccessToken={cesiumIonAccessToken} />
+      <featureContext.Provider value={context}>{ready ? children : null}</featureContext.Provider>
+    </Viewer>
+  );
+};
+
+const creditContainer = document.createElement("div");
+
+const Component = forwardRef(Cesium);
+
+export default Component;
+
+export const engine: Engine = {
+  component: Component,
+  featureComponent: Feature,
+  clusterComponent: Cluster,
+  delegatedDataTypes: ["czml", "wms", "mvt", "3dtiles", "osm-buildings", "kml"],
+};
diff --git a/web/src/beta/core/engines/Cesium/types.ts b/web/src/beta/core/engines/Cesium/types.ts
new file mode 100644
index 0000000000..c7f68142d4
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/types.ts
@@ -0,0 +1,3 @@
+import type { Cesium3DTileFeature, Cesium3DTilePointFeature, Model } from "cesium";
+
+export type InternalCesium3DTileFeature = Cesium3DTileFeature | Cesium3DTilePointFeature | Model;
diff --git a/web/src/beta/core/engines/Cesium/useEngineRef.test.tsx b/web/src/beta/core/engines/Cesium/useEngineRef.test.tsx
new file mode 100644
index 0000000000..02eba7b957
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/useEngineRef.test.tsx
@@ -0,0 +1,622 @@
+import { renderHook } from "@testing-library/react";
+import {
+  JulianDate,
+  Viewer as CesiumViewer,
+  Cartesian3,
+  Globe,
+  Ellipsoid,
+  Matrix4,
+  SceneMode,
+} from "cesium";
+import { useRef } from "react";
+import type { CesiumComponentRef } from "resium";
+import { vi, expect, test, afterEach } from "vitest";
+
+import type { EngineRef, Clock } from "..";
+
+import useEngineRef from "./useEngineRef";
+
+vi.mock("./common", async () => {
+  const commons: Record<string, any> = await vi.importActual("./common");
+  return {
+    ...commons,
+    zoom: vi.fn(),
+    getCenterCamera: vi.fn(({ scene }) => scene?.globe?.pick?.()),
+  };
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+test("engine should be cesium", () => {
+  const { result } = renderHook(() => {
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return engineRef;
+  });
+  expect(result.current.current?.name).toBe("cesium");
+});
+
+test("bind mouse events", () => {
+  const mockMouseEventCallback = vi.fn(e => e);
+  const props = { x: 1, y: 1 };
+  const { result } = renderHook(() => {
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return engineRef;
+  });
+
+  result.current.current?.onClick(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.click).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.click?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(1);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onDoubleClick(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.doubleclick).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.doubleclick?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(2);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onMouseDown(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.mousedown).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.mousedown?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(3);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onMouseUp(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.mouseup).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.mouseup?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(4);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onRightClick(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.rightclick).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.rightclick?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(5);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onRightDown(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.rightdown).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.rightdown?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(6);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onRightUp(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.rightup).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.rightup?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(7);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onMiddleClick(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.middleclick).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.middleclick?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(8);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onMiddleDown(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.middledown).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.middledown?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(9);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onMiddleUp(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.middleup).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.middleup?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(10);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onMouseMove(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.mousemove).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.mousemove?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(11);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onMouseEnter(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.mouseenter).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.mouseenter?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(12);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onMouseLeave(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.mouseleave).toBe(mockMouseEventCallback);
+
+  result.current.current?.mouseEventCallbacks.mouseleave?.(props);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(13);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(props);
+
+  result.current.current?.onWheel(mockMouseEventCallback);
+  expect(result.current.current?.mouseEventCallbacks.wheel).toBe(mockMouseEventCallback);
+
+  const wheelProps = { delta: 1 };
+  result.current.current?.mouseEventCallbacks.wheel?.(wheelProps);
+  expect(mockMouseEventCallback).toHaveBeenCalledTimes(14);
+  expect(mockMouseEventCallback).toHaveBeenCalledWith(wheelProps);
+});
+
+const mockRequestRender = vi.fn();
+test("requestRender", () => {
+  const { result } = renderHook(() => {
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement: {
+        scene: {
+          requestRender: mockRequestRender,
+        },
+        isDestroyed: () => {
+          return false;
+        },
+      } as any,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return engineRef;
+  });
+  result.current.current?.requestRender();
+  expect(mockRequestRender).toHaveBeenCalledTimes(1);
+});
+
+test("zoom", async () => {
+  const viewer = {
+    scene: {
+      camera: {},
+    },
+    isDestroyed: () => {
+      return false;
+    },
+  } as any;
+  const { result } = renderHook(() => {
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement: viewer,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return engineRef;
+  });
+
+  const commons = await import("./common");
+
+  result.current.current?.zoomIn(10);
+  expect(commons.zoom).toHaveBeenCalledTimes(1);
+  expect(commons.zoom).toHaveBeenCalledWith(
+    {
+      viewer,
+      relativeAmount: 0.1,
+    },
+    undefined,
+  );
+
+  result.current.current?.zoomOut(20);
+  expect(commons.zoom).toHaveBeenCalledTimes(2);
+  expect(commons.zoom).toHaveBeenCalledWith(
+    {
+      viewer,
+      relativeAmount: 20,
+    },
+    undefined,
+  );
+});
+
+test("call orbit when camera focuses on center", async () => {
+  const { result } = renderHook(() => {
+    const cesiumElement = {
+      scene: {
+        camera: {
+          lookAtTransform: vi.fn(),
+          rotateLeft: vi.fn(),
+          rotateUp: vi.fn(),
+          look: vi.fn(),
+          move: vi.fn(),
+          positionCartographic: new Cartesian3(),
+        },
+        mode: SceneMode.SCENE3D,
+        globe: {
+          ellipsoid: new Ellipsoid(),
+          pick: () => new Cartesian3(),
+        },
+        canvas: {
+          clientWidth: 100,
+          clientHeight: 100,
+        },
+      },
+      transform: new Matrix4(),
+      positionWC: new Cartesian3(),
+      isDestroyed: () => {
+        return false;
+      },
+    } as any;
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return [engineRef, cesium] as const;
+  });
+
+  const commons = await import("./common");
+
+  const [engineRef, cesium] = result.current;
+
+  engineRef.current?.orbit(90);
+  expect(commons.getCenterCamera).toHaveBeenCalled();
+  expect(cesium.current.cesiumElement?.scene.camera.rotateLeft).toHaveBeenCalled();
+  expect(cesium.current.cesiumElement?.scene.camera.rotateUp).toHaveBeenCalled();
+  expect(cesium.current.cesiumElement?.scene.camera.lookAtTransform).toHaveBeenCalledTimes(2);
+});
+
+test("call orbit when camera does not focus on center", async () => {
+  const { result } = renderHook(() => {
+    const cesiumElement = {
+      scene: {
+        camera: {
+          lookAtTransform: vi.fn(),
+          rotateLeft: vi.fn(),
+          rotateUp: vi.fn(),
+          look: vi.fn(),
+          move: vi.fn(),
+          positionWC: new Cartesian3(),
+          positionCartographic: new Cartesian3(),
+        },
+        mode: SceneMode.SCENE3D,
+        globe: {
+          ellipsoid: new Ellipsoid(),
+          pick: () => undefined,
+        },
+        canvas: {
+          clientWidth: 100,
+          clientHeight: 100,
+        },
+      },
+      transform: new Matrix4(),
+      isDestroyed: () => {
+        return false;
+      },
+    } as any;
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return [engineRef, cesium] as const;
+  });
+
+  const commons = await import("./common");
+
+  const [engineRef, cesium] = result.current;
+
+  engineRef.current?.orbit(90);
+  expect(commons.getCenterCamera).toHaveBeenCalled();
+  expect(cesium.current.cesiumElement?.scene.camera.look).toHaveBeenCalledTimes(2);
+  expect(cesium.current.cesiumElement?.scene.camera.lookAtTransform).toHaveBeenCalledTimes(2);
+});
+
+test("orbit on 2D mode", async () => {
+  const { result } = renderHook(() => {
+    const cesiumElement = {
+      scene: {
+        camera: {
+          lookAtTransform: vi.fn(),
+          rotateLeft: vi.fn(),
+          rotateUp: vi.fn(),
+          look: vi.fn(),
+          move: vi.fn(),
+          positionWC: new Cartesian3(),
+          positionCartographic: new Cartesian3(),
+        },
+        mode: SceneMode.SCENE2D,
+        globe: {
+          ellipsoid: new Ellipsoid(),
+          pick: () => undefined,
+        },
+        canvas: {
+          clientWidth: 100,
+          clientHeight: 100,
+        },
+      },
+      transform: new Matrix4(),
+      isDestroyed: () => {
+        return false;
+      },
+    } as any;
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return [engineRef, cesium] as const;
+  });
+
+  const [engineRef, cesium] = result.current;
+
+  engineRef.current?.orbit(90);
+  expect(cesium.current.cesiumElement?.scene.camera.move).toHaveBeenCalledTimes(1);
+});
+
+test("rotateRight", async () => {
+  const { result } = renderHook(() => {
+    const cesiumElement = {
+      scene: {
+        camera: {
+          lookAtTransform: vi.fn(),
+          rotateRight: vi.fn(),
+          positionWC: new Cartesian3(),
+          twistRight: vi.fn(),
+          twistLeft: vi.fn(),
+        },
+        mode: SceneMode.SCENE3D,
+        globe: {
+          ellipsoid: new Ellipsoid(),
+        },
+      },
+      transform: new Matrix4(),
+      isDestroyed: () => {
+        return false;
+      },
+    } as any;
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return [engineRef, cesium] as const;
+  });
+
+  const [engineRef, cesium] = result.current;
+
+  engineRef.current?.rotateRight(90);
+  expect(cesium.current.cesiumElement?.scene.camera.rotateRight).toHaveBeenCalled();
+  expect(cesium.current.cesiumElement?.scene.camera.lookAtTransform).toHaveBeenCalledTimes(2);
+});
+
+test("rotateRight on 2D mode", async () => {
+  const { result } = renderHook(() => {
+    const cesiumElement = {
+      scene: {
+        camera: {
+          lookAtTransform: vi.fn(),
+          rotateRight: vi.fn(),
+          positionWC: new Cartesian3(),
+          twistRight: vi.fn(),
+          twistLeft: vi.fn(),
+        },
+        mode: SceneMode.SCENE2D,
+        globe: {
+          ellipsoid: new Ellipsoid(),
+        },
+      },
+      transform: new Matrix4(),
+      isDestroyed: () => {
+        return false;
+      },
+    } as any;
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return [engineRef, cesium] as const;
+  });
+
+  const [engineRef, cesium] = result.current;
+
+  engineRef.current?.rotateRight(90);
+  expect(cesium.current.cesiumElement?.scene.camera.twistLeft).toHaveBeenCalled();
+  expect(cesium.current.cesiumElement?.scene.camera.twistRight).toHaveBeenCalled();
+});
+
+test("getClock", () => {
+  const startTime = JulianDate.fromIso8601("2022-01-11");
+  const stopTime = JulianDate.fromIso8601("2022-01-15");
+  const currentTime = JulianDate.fromIso8601("2022-01-14");
+  const { result } = renderHook(() => {
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement: {
+        clock: {
+          startTime,
+          stopTime,
+          currentTime,
+          shouldAnimate: false,
+          multiplier: 1,
+        },
+        isDestroyed: () => {
+          return false;
+        },
+      } as any,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return { engineRef, cesium };
+  });
+
+  const actual = result.current.engineRef.current?.getClock();
+  expect(actual).toEqual<Clock>({
+    start: JulianDate.toDate(startTime),
+    stop: JulianDate.toDate(stopTime),
+    current: JulianDate.toDate(currentTime),
+    playing: false,
+    speed: 1,
+  });
+});
+
+test("captureScreen", () => {
+  const mockViewerRender = vi.fn();
+  const mockCanvasToDataURL = vi.fn();
+  const mockViewerIsDestroyed = vi.fn(() => false);
+  const { result } = renderHook(() => {
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement: {
+        render: mockViewerRender,
+        isDestroyed: mockViewerIsDestroyed,
+        canvas: {
+          toDataURL: mockCanvasToDataURL,
+        },
+      } as any,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return engineRef;
+  });
+
+  result.current.current?.captureScreen();
+  expect(mockViewerRender).toHaveBeenCalledTimes(1);
+  expect(mockCanvasToDataURL).toHaveBeenCalledTimes(1);
+
+  result.current.current?.captureScreen("image/jpeg", 0.8);
+  expect(mockCanvasToDataURL).toHaveBeenCalledWith("image/jpeg", 0.8);
+});
+
+test("move", () => {
+  const mockMove = vi.fn(e => e);
+  const { result } = renderHook(() => {
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement: {
+        isDestroyed: () => false,
+        scene: {
+          camera: {
+            position: new Cartesian3(0, 0, 1),
+            direction: Cartesian3.clone(Cartesian3.UNIT_X),
+            up: Cartesian3.clone(Cartesian3.UNIT_Z),
+            right: Cartesian3.clone(Cartesian3.UNIT_Y),
+            move: mockMove,
+          },
+          globe: new Globe(Ellipsoid.UNIT_SPHERE),
+        },
+      } as any,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return engineRef;
+  });
+
+  result.current.current?.moveForward(100);
+  expect(mockMove).toHaveBeenCalledTimes(1);
+  expect(mockMove).toHaveBeenLastCalledWith(new Cartesian3(1, 0, 0), 100);
+
+  result.current.current?.moveBackward(100);
+  expect(mockMove).toHaveBeenCalledTimes(2);
+  expect(mockMove).toHaveBeenLastCalledWith(new Cartesian3(1, 0, 0), -100);
+
+  result.current.current?.moveUp(100);
+  expect(mockMove).toHaveBeenCalledTimes(3);
+  expect(mockMove).toHaveBeenLastCalledWith(new Cartesian3(0, 0, 1), 100);
+
+  result.current.current?.moveDown(100);
+  expect(mockMove).toHaveBeenCalledTimes(4);
+  expect(mockMove).toHaveBeenLastCalledWith(new Cartesian3(0, 0, 1), -100);
+
+  result.current.current?.moveRight(100);
+  expect(mockMove).toHaveBeenCalledTimes(5);
+  expect(mockMove).toHaveBeenLastCalledWith(new Cartesian3(0, 1, 0), 100);
+
+  result.current.current?.moveLeft(100);
+  expect(mockMove).toHaveBeenCalledTimes(6);
+  expect(mockMove).toHaveBeenLastCalledWith(new Cartesian3(0, 1, 0), -100);
+});
+
+test("look", () => {
+  const mockLook = vi.fn(e => e);
+  const { result } = renderHook(() => {
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement: {
+        isDestroyed: () => false,
+        scene: {
+          camera: {
+            position: new Cartesian3(0, 0, 1),
+            direction: Cartesian3.clone(Cartesian3.UNIT_X),
+            up: Cartesian3.clone(Cartesian3.UNIT_Z),
+            right: Cartesian3.clone(Cartesian3.UNIT_Y),
+            look: mockLook,
+          },
+          globe: new Globe(Ellipsoid.UNIT_SPHERE),
+        },
+      } as any,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return engineRef;
+  });
+
+  result.current.current?.lookHorizontal(90);
+  expect(mockLook).toHaveBeenCalledTimes(1);
+  expect(mockLook).toHaveBeenLastCalledWith(new Cartesian3(0, 0, 1), 90);
+
+  result.current.current?.lookVertical(90);
+  expect(mockLook).toHaveBeenCalledTimes(2);
+  expect(mockLook).toHaveBeenLastCalledWith(new Cartesian3(0, 1, 0), 90);
+});
+
+test("get location from screen xy", () => {
+  const mockGetPickRay = vi.fn(() => true);
+  const mockPickEllipsoid = vi.fn(() =>
+    Cartesian3.fromDegrees(137, 40, 0, new Globe(Ellipsoid.WGS84).ellipsoid),
+  );
+  const mockPick = vi.fn(() =>
+    Cartesian3.fromDegrees(110, 20, 10000, new Globe(Ellipsoid.WGS84).ellipsoid),
+  );
+  const { result } = renderHook(() => {
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>({
+      cesiumElement: {
+        isDestroyed: () => false,
+        scene: {
+          camera: {
+            getPickRay: mockGetPickRay,
+            pickEllipsoid: mockPickEllipsoid,
+          },
+          globe: {
+            ellipsoid: new Globe(Ellipsoid.WGS84).ellipsoid,
+            pick: mockPick,
+          },
+        },
+      } as any,
+    });
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return engineRef;
+  });
+
+  const location = result.current.current?.getLocationFromScreen(0, 0);
+  expect(location?.lng).toBeCloseTo(137, 0);
+  expect(location?.lat).toBeCloseTo(40, 0);
+  expect(location?.height).toBeCloseTo(0, 0);
+  const location2 = result.current.current?.getLocationFromScreen(0, 0, true);
+  expect(location2?.lng).toBeCloseTo(110, 0);
+  expect(location2?.lat).toBeCloseTo(20, 0);
+  expect(location2?.height).toBeCloseTo(10000, 0);
+});
+
+test("onTick", () => {
+  const d = new Date();
+  const mockTickEventHandler = vi.fn(e => e);
+  const { result } = renderHook(() => {
+    const cesium = useRef<CesiumComponentRef<CesiumViewer>>(null);
+    const engineRef = useRef<EngineRef>(null);
+    useEngineRef(engineRef, cesium);
+    return engineRef;
+  });
+
+  result.current.current?.onTick(mockTickEventHandler);
+  expect(result.current.current?.tickEventCallback?.current).toEqual([mockTickEventHandler]);
+
+  result.current.current?.tickEventCallback?.current?.[0]?.(d, {
+    start: new Date(),
+    stop: new Date(),
+  });
+  expect(mockTickEventHandler).toHaveBeenCalledTimes(1);
+
+  result.current.current?.removeTickEventListener(mockTickEventHandler);
+  expect(result.current.current?.tickEventCallback?.current).toHaveLength(0);
+});
diff --git a/web/src/beta/core/engines/Cesium/useEngineRef.ts b/web/src/beta/core/engines/Cesium/useEngineRef.ts
new file mode 100644
index 0000000000..a4eb1d6f26
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/useEngineRef.ts
@@ -0,0 +1,454 @@
+import * as Cesium from "cesium";
+import { ClockStep, JulianDate, Math as CesiumMath } from "cesium";
+import { useImperativeHandle, Ref, RefObject, useMemo, useRef } from "react";
+import { CesiumComponentRef } from "resium";
+
+import { TickEventCallback } from "@reearth/beta/core/Map";
+
+import type { EngineRef, MouseEvents, MouseEvent } from "..";
+
+import {
+  getLocationFromScreen,
+  flyTo,
+  lookAt,
+  getCamera,
+  getClock,
+  lookHorizontal,
+  lookVertical,
+  moveForward,
+  moveBackward,
+  moveUp,
+  moveDown,
+  moveLeft,
+  moveRight,
+  moveOverTerrain,
+  flyToGround,
+  getCenterCamera,
+  zoom,
+  lookAtWithoutAnimation,
+  sampleTerrainHeight,
+} from "./common";
+import { getTag } from "./Feature";
+import { findEntity } from "./utils";
+
+export default function useEngineRef(
+  ref: Ref<EngineRef>,
+  cesium: RefObject<CesiumComponentRef<Cesium.Viewer>>,
+): EngineRef {
+  const cancelCameraFlight = useRef<() => void>();
+  const mouseEventCallbacks = useRef<MouseEvents>({
+    click: undefined,
+    doubleclick: undefined,
+    mousedown: undefined,
+    mouseup: undefined,
+    rightclick: undefined,
+    rightdown: undefined,
+    rightup: undefined,
+    middleclick: undefined,
+    middledown: undefined,
+    middleup: undefined,
+    mousemove: undefined,
+    mouseenter: undefined,
+    mouseleave: undefined,
+    wheel: undefined,
+  });
+  const tickEventCallback = useRef<TickEventCallback[]>([]);
+  const e = useMemo((): EngineRef => {
+    return {
+      name: "cesium",
+      requestRender: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        viewer.scene?.requestRender();
+      },
+      getCamera: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        return getCamera(viewer);
+      },
+      getLocationFromScreen: (x, y, withTerrain) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        return getLocationFromScreen(viewer.scene, x, y, withTerrain);
+      },
+      sampleTerrainHeight: async (lng, lat) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        return await sampleTerrainHeight(viewer.scene, lng, lat);
+      },
+      flyTo: (target, options) => {
+        if (target && typeof target === "object") {
+          const viewer = cesium.current?.cesiumElement;
+          if (!viewer || viewer.isDestroyed()) return;
+
+          cancelCameraFlight.current?.();
+          cancelCameraFlight.current = flyTo(
+            viewer.scene?.camera,
+            { ...getCamera(viewer), ...target },
+            options,
+          );
+        }
+        if (target && typeof target === "string") {
+          const viewer = cesium.current?.cesiumElement;
+          if (!viewer || viewer.isDestroyed()) return;
+
+          const layerOrFeatureId = target;
+          const entityFromFeatureId = findEntity(viewer, undefined, layerOrFeatureId);
+          if (
+            entityFromFeatureId &&
+            !(
+              entityFromFeatureId instanceof Cesium.Cesium3DTileFeature ||
+              entityFromFeatureId instanceof Cesium.Cesium3DTilePointFeature ||
+              entityFromFeatureId instanceof Cesium.Model
+            )
+          ) {
+            viewer.flyTo(entityFromFeatureId, options);
+          } else {
+            for (const ds of [viewer.dataSourceDisplay.dataSources, viewer.dataSources]) {
+              for (let i = 0; i < ds.length; i++) {
+                const d = ds.get(i);
+                const entities = d.entities.values;
+                const e = entities.find(e => getTag(e)?.layerId === layerOrFeatureId);
+                if (e) {
+                  viewer.flyTo(d);
+                  return;
+                }
+              }
+            }
+
+            const targets: Cesium.Entity[] = [];
+            for (const entity of viewer.entities.values) {
+              if (getTag(entity)?.layerId === layerOrFeatureId) {
+                targets.push(entity);
+              }
+            }
+            if (targets.length) {
+              viewer.flyTo(targets, options);
+              return;
+            }
+
+            const entityFromLayerId = findEntity(viewer, layerOrFeatureId);
+            if (
+              entityFromLayerId &&
+              !(
+                entityFromLayerId instanceof Cesium.Cesium3DTileFeature ||
+                entityFromLayerId instanceof Cesium.Cesium3DTilePointFeature ||
+                entityFromLayerId instanceof Cesium.Model
+              )
+            ) {
+              viewer.flyTo(entityFromLayerId, options);
+            }
+          }
+        }
+      },
+      lookAt: (camera, options) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        if (options?.withoutAnimation) {
+          return lookAtWithoutAnimation(viewer.scene, { ...getCamera(viewer), ...camera });
+        }
+        cancelCameraFlight.current?.();
+        cancelCameraFlight.current = lookAt(
+          viewer.scene?.camera,
+          { ...getCamera(viewer), ...camera },
+          options,
+        );
+      },
+      lookAtLayer: layerId => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        const e = viewer.entities.getById(layerId);
+        if (!e) return;
+        const entityPos = e.position?.getValue(viewer.clock.currentTime);
+        if (!entityPos) return;
+        const cameraPos = viewer.camera.positionWC;
+        const distance = Cesium.Cartesian3.distance(entityPos, cameraPos);
+        if (Math.round(distance * 1000) / 1000 === 5000) return;
+        const camera = getCamera(viewer);
+        const offset = new Cesium.HeadingPitchRange(
+          camera?.heading ?? 0,
+          camera?.pitch ?? -90,
+          5000,
+        );
+        viewer.zoomTo(e, offset);
+      },
+      getViewport: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        const rect = viewer.camera.computeViewRectangle();
+        return rect
+          ? {
+              north: CesiumMath.toDegrees(rect.north),
+              south: CesiumMath.toDegrees(rect.south),
+              west: CesiumMath.toDegrees(rect.west),
+              east: CesiumMath.toDegrees(rect.east),
+            }
+          : undefined;
+      },
+      zoomIn: (amount, options) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        zoom({ viewer, relativeAmount: 1 / amount }, options);
+      },
+      zoomOut: (amount, options) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        zoom({ viewer, relativeAmount: amount }, options);
+      },
+      orbit: radian => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        const scene = viewer.scene;
+        const camera = scene.camera;
+
+        const distance = 0.02;
+        const angle = radian + CesiumMath.PI_OVER_TWO;
+
+        const x = Math.cos(angle) * distance;
+        const y = Math.sin(angle) * distance;
+
+        const oldTransform = Cesium.Matrix4.clone(camera.transform);
+
+        const center = getCenterCamera({ camera, scene });
+        // Get fixed frame from center to globe ellipsoid.
+        const frame = Cesium.Transforms.eastNorthUpToFixedFrame(
+          center || camera.positionWC,
+          scene.globe.ellipsoid,
+        );
+
+        camera.lookAtTransform(frame);
+
+        if (viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
+          camera.move(
+            new Cesium.Cartesian3(x, y, 0),
+            (Math.max(scene.canvas.clientWidth, scene.canvas.clientHeight) / 100) *
+              camera.positionCartographic.height *
+              distance,
+          );
+        } else if (center) {
+          camera.rotateLeft(x);
+          camera.rotateUp(y);
+        } else {
+          camera.look(Cesium.Cartesian3.UNIT_Z, x);
+          camera.look(camera.right, y);
+        }
+        camera.lookAtTransform(oldTransform);
+      },
+      rotateRight: radian => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        const scene = viewer.scene;
+        const camera = scene.camera;
+        const oldTransform = Cesium.Matrix4.clone(camera.transform);
+        const frame = Cesium.Transforms.eastNorthUpToFixedFrame(
+          camera.positionWC,
+          scene.globe.ellipsoid,
+        );
+        if (viewer.scene.mode !== Cesium.SceneMode.SCENE3D) {
+          camera.twistRight(radian - -camera.heading);
+          camera.twistLeft(radian - -camera.heading);
+        } else {
+          camera.lookAtTransform(frame);
+          camera.rotateRight(radian - -camera.heading);
+          camera.lookAtTransform(oldTransform);
+        }
+      },
+      changeSceneMode: (sceneMode, duration = 2) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene) return;
+        switch (sceneMode) {
+          case "2d":
+            viewer?.scene?.morphTo2D(duration);
+            break;
+          case "columbus":
+            viewer?.scene?.morphToColumbusView(duration);
+            break;
+          case "3d":
+          default:
+            viewer?.scene?.morphTo3D(duration);
+            break;
+        }
+      },
+      getClock: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.clock) return;
+        const clock: Cesium.Clock = viewer.clock;
+        return getClock(clock);
+      },
+      captureScreen: (type?: string, encoderOptions?: number) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        viewer.render();
+        return viewer.canvas.toDataURL(type, encoderOptions);
+      },
+      enableScreenSpaceCameraController: (enabled = true) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene) return;
+        const enable = !!enabled;
+        viewer.scene.screenSpaceCameraController.enableRotate = enable;
+        viewer.scene.screenSpaceCameraController.enableTranslate = enable;
+        viewer.scene.screenSpaceCameraController.enableZoom = enable;
+        viewer.scene.screenSpaceCameraController.enableTilt = enable;
+        viewer.scene.screenSpaceCameraController.enableLook = enable;
+      },
+      lookHorizontal: amount => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene || !amount) return;
+        lookHorizontal(viewer.scene, amount);
+      },
+      lookVertical: amount => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene || !amount) return;
+        lookVertical(viewer.scene, amount);
+      },
+      moveForward: amount => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene || !amount) return;
+        moveForward(viewer.scene, amount);
+      },
+      moveBackward: amount => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene || !amount) return;
+        moveBackward(viewer.scene, amount);
+      },
+      moveUp: amount => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene || !amount) return;
+        moveUp(viewer.scene, amount);
+      },
+      moveDown: amount => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene || !amount) return;
+        moveDown(viewer.scene, amount);
+      },
+      moveLeft: amount => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene || !amount) return;
+        moveLeft(viewer.scene, amount);
+      },
+      moveRight: amount => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed() || !viewer.scene || !amount) return;
+        moveRight(viewer.scene, amount);
+      },
+      moveOverTerrain: async offset => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        moveOverTerrain(viewer, offset);
+      },
+      flyToGround: async (camera, options, offset) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        flyToGround(viewer, cancelCameraFlight, camera, options, offset);
+      },
+      onClick: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.click = cb;
+      },
+      onDoubleClick: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.doubleclick = cb;
+      },
+      onMouseDown: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.mousedown = cb;
+      },
+      onMouseUp: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.mouseup = cb;
+      },
+      onRightClick: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.rightclick = cb;
+      },
+      onRightDown: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.rightdown = cb;
+      },
+      onRightUp: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.rightup = cb;
+      },
+      onMiddleClick: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.middleclick = cb;
+      },
+      onMiddleDown: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.middledown = cb;
+      },
+      onMiddleUp: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.middleup = cb;
+      },
+      onMouseMove: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.mousemove = cb;
+      },
+      onMouseEnter: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.mouseenter = cb;
+      },
+      onMouseLeave: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.mouseleave = cb;
+      },
+      onWheel: (cb: ((props: MouseEvent) => void) | undefined) => {
+        mouseEventCallbacks.current.wheel = cb;
+      },
+      mouseEventCallbacks: mouseEventCallbacks.current,
+      changeSpeed: (speed: number) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        viewer.clock.multiplier = speed;
+        viewer.clock.clockStep = ClockStep.SYSTEM_CLOCK_MULTIPLIER;
+      },
+      changeTime: (time: Date) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        viewer.clock.currentTime = JulianDate.fromDate(time);
+      },
+      pause: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        viewer.clock.shouldAnimate = false;
+      },
+      play: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        viewer.clock.shouldAnimate = true;
+      },
+      tick: () => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        return JulianDate.toDate(viewer.clock.tick());
+      },
+      changeStart: (start: Date) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        viewer.clock.startTime = JulianDate.fromDate(start);
+      },
+      changeStop: (stop: Date) => {
+        const viewer = cesium.current?.cesiumElement;
+        if (!viewer || viewer.isDestroyed()) return;
+        viewer.clock.stopTime = JulianDate.fromDate(stop);
+      },
+      inViewport: location => {
+        const rect = e.getViewport();
+        return !!(
+          rect &&
+          location &&
+          typeof location.lng === "number" &&
+          typeof location.lat === "number" &&
+          Cesium.Rectangle.contains(
+            new Cesium.Rectangle(
+              CesiumMath.toRadians(rect.west),
+              CesiumMath.toRadians(rect.south),
+              CesiumMath.toRadians(rect.east),
+              CesiumMath.toRadians(rect.north),
+            ),
+            Cesium.Cartographic.fromDegrees(location.lng, location.lat),
+          )
+        );
+      },
+      onTick: cb => {
+        tickEventCallback.current.push(cb);
+      },
+      removeTickEventListener: cb => {
+        tickEventCallback.current = tickEventCallback.current.filter(c => c !== cb) || [];
+      },
+      tickEventCallback,
+    };
+  }, [cesium]);
+
+  useImperativeHandle(ref, () => e, [e]);
+
+  return e;
+}
diff --git a/web/src/beta/core/engines/Cesium/utils.ts b/web/src/beta/core/engines/Cesium/utils.ts
new file mode 100644
index 0000000000..a4dfa89212
--- /dev/null
+++ b/web/src/beta/core/engines/Cesium/utils.ts
@@ -0,0 +1,192 @@
+import {
+  Cartesian3,
+  Viewer as CesiumViewer,
+  Math as CesiumMath,
+  TranslationRotationScale,
+  Cartographic,
+  Entity,
+  Cesium3DTile,
+  Cesium3DTileset,
+  Cesium3DTileContent,
+  Cesium3DTileFeature,
+  JulianDate,
+  Model,
+  ImageryLayerFeatureInfo,
+} from "cesium";
+
+import { InfoboxProperty } from "@reearth/beta/core/Crust/Infobox";
+import { DefaultInfobox } from "@reearth/beta/core/Map";
+
+import { getTag } from "./Feature";
+import type { InternalCesium3DTileFeature } from "./types";
+
+export const convertCartesian3ToPosition = (
+  cesium?: CesiumViewer,
+  pos?: Cartesian3,
+): { lat: number; lng: number; height: number } | undefined => {
+  if (!pos) return;
+  const cartographic = cesium?.scene.globe.ellipsoid.cartesianToCartographic(pos);
+  if (!cartographic) return;
+  return {
+    lat: CesiumMath.toDegrees(cartographic.latitude),
+    lng: CesiumMath.toDegrees(cartographic.longitude),
+    height: cartographic.height,
+  };
+};
+
+export const translationWithClamping = (
+  trs: TranslationRotationScale,
+  allowEnterGround: boolean,
+  terrainHeightEstimate: number,
+) => {
+  if (!allowEnterGround) {
+    const cartographic = Cartographic.fromCartesian(trs.translation, undefined, new Cartographic());
+    const boxBottomHeight = cartographic.height - trs.scale.z / 2;
+    const floorHeight = terrainHeightEstimate;
+    if (boxBottomHeight < floorHeight) {
+      cartographic.height += floorHeight - boxBottomHeight;
+      Cartographic.toCartesian(cartographic, undefined, trs.translation);
+    }
+  }
+};
+
+export function lookupFeatures(
+  c: Cesium3DTileContent,
+  cb: (feature: InternalCesium3DTileFeature, content: Cesium3DTileContent) => void | Promise<void>,
+) {
+  if (!c) return;
+
+  // Use model, if featuresLength is 0.
+  if (!c.featuresLength && "_model" in c && c._model instanceof Model) {
+    return cb(c._model, c);
+  }
+
+  const length = c.featuresLength;
+  for (let i = 0; i < length; i++) {
+    const f = c.getFeature(i);
+    if (!f) {
+      continue;
+    }
+    cb(f, c);
+  }
+  c.innerContents?.forEach(c => lookupFeatures(c, cb));
+  return;
+}
+
+const findFeatureFrom3DTile = (
+  tile: Cesium3DTile,
+  featureId?: string,
+): Cesium3DTileFeature | void => {
+  let target: InternalCesium3DTileFeature | undefined = undefined;
+  lookupFeatures(tile.content, f => {
+    const tag = getTag(f);
+    if (tag?.featureId === featureId) {
+      target = f;
+    }
+  });
+
+  if (target) {
+    return target;
+  }
+
+  for (const child of tile.children) {
+    const t = findFeatureFrom3DTile(child, featureId);
+    if (t) {
+      return t;
+    }
+  }
+};
+
+export function findEntity(
+  viewer: CesiumViewer,
+  layerId?: string,
+  featureId?: string,
+): Entity | Cesium3DTileset | InternalCesium3DTileFeature | undefined {
+  const id = featureId ?? layerId;
+  const keyName = featureId ? "featureId" : "layerId";
+  if (!id) return;
+
+  let entity = viewer.entities.getById(id);
+  if (entity) return entity;
+
+  entity = viewer.entities.values.find(e => getTag(e)?.[keyName] === id);
+  if (entity) return entity;
+
+  for (const ds of [viewer.dataSourceDisplay.dataSources, viewer.dataSources]) {
+    for (let i = 0; i < ds.length; i++) {
+      const entities = ds.get(i).entities.values;
+      const e = entities.find(e => getTag(e)?.[keyName] === id);
+      if (e) {
+        return e;
+      }
+    }
+  }
+
+  // Find Cesium3DTileFeature
+  for (let i = 0; i < viewer.scene.primitives.length; i++) {
+    const prim = viewer.scene.primitives.get(i);
+    if (!(prim instanceof Cesium3DTileset) || !prim.ready) {
+      continue;
+    }
+
+    const target = findFeatureFrom3DTile(prim.root, featureId);
+    if (target) {
+      return target;
+    }
+  }
+
+  // Find Cesium3DTileset
+  for (let i = 0; i < viewer.scene.primitives.length; i++) {
+    const prim = viewer.scene.primitives.get(i);
+    if (!(prim instanceof Cesium3DTileset)) {
+      continue;
+    }
+
+    const tag = getTag(prim);
+    if (tag?.layerId && layerId && tag?.layerId === layerId) {
+      return prim;
+    }
+  }
+
+  return;
+}
+
+export const getEntityContent = (
+  entity: Entity | ImageryLayerFeatureInfo,
+  time: JulianDate,
+  defaultContent: InfoboxProperty["defaultContent"],
+): DefaultInfobox["content"] => {
+  const content: Record<
+    Exclude<InfoboxProperty["defaultContent"], undefined>,
+    DefaultInfobox["content"]
+  > = {
+    description: {
+      type: "html",
+      value:
+        entity instanceof ImageryLayerFeatureInfo
+          ? entity.description
+          : entity.description?.getValue(time),
+    },
+    attributes: {
+      type: "table",
+      value:
+        !(entity instanceof Entity) &&
+        "properties" in entity &&
+        entity.properties &&
+        typeof entity.properties === "object"
+          ? propertiesToTableContent(entity.properties)
+          : entity instanceof Entity && entity.properties
+          ? propertiesToTableContent(entity.properties.getValue(time))
+          : [],
+    },
+  };
+
+  return defaultContent ? content[defaultContent] : content.attributes ?? content.description;
+};
+
+function propertiesToTableContent(properties: Record<string, any>): { key: string; value: any }[] {
+  return Object.entries(properties).reduce<{ key: string; value: [string, string] }[]>(
+    (a, [key, value]) => [...a, { key, value }],
+    [],
+  );
+}
diff --git a/web/src/beta/core/engines/index.ts b/web/src/beta/core/engines/index.ts
new file mode 100644
index 0000000000..bad5d746b8
--- /dev/null
+++ b/web/src/beta/core/engines/index.ts
@@ -0,0 +1,37 @@
+export type {
+  FeatureComponentProps,
+  Engine,
+  EngineComponent,
+  EngineRef,
+  EngineProps,
+  LayerSelectionReason,
+  SceneProperty,
+  MouseEvent,
+  MouseEvents,
+  Geometry,
+  AppearanceTypes,
+  Camera,
+  LatLng,
+  ClusterProperty,
+  ClusterComponentProps,
+  CameraOptions,
+  Clock,
+  FlyToDestination,
+  TerrainProperty,
+  LayerEditEvent,
+  EvalFeature,
+} from "../Map";
+export type {
+  Cesium3DTilesAppearance,
+  EllipsoidAppearance,
+  PolygonAppearance,
+  PolylineAppearance,
+  MarkerAppearance,
+  ModelAppearance,
+  LegacyPhotooverlayAppearance,
+  ResourceAppearance,
+  RasterAppearance,
+  ComputedFeature,
+  ComputedLayer,
+  Feature,
+} from "../mantle";
diff --git a/web/src/beta/core/mantle/README.md b/web/src/beta/core/mantle/README.md
new file mode 100644
index 0000000000..01e93807d2
--- /dev/null
+++ b/web/src/beta/core/mantle/README.md
@@ -0,0 +1,7 @@
+# @reearth/core/mantle
+
+This library provides React hooks and components for following functionality:
+
+- Fetching various data and convert them to features
+- Evaluating Re:Earth Style Language expressions
+- Compatibility with conventional layer system
diff --git a/web/src/beta/core/mantle/atoms/cache.test.ts b/web/src/beta/core/mantle/atoms/cache.test.ts
new file mode 100644
index 0000000000..6fea1cf037
--- /dev/null
+++ b/web/src/beta/core/mantle/atoms/cache.test.ts
@@ -0,0 +1,61 @@
+import { renderHook, act } from "@testing-library/react";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useMemo } from "react";
+import { test, expect } from "vitest";
+
+import { cacheAtom, doubleKeyCacheAtom } from "./cache";
+
+test("cacheAtom", () => {
+  const { result } = renderHook(() => {
+    const atoms = useMemo(() => cacheAtom<string, string>(), []);
+    const get = useAtomValue(atoms.get);
+    const set = useSetAtom(atoms.set);
+    return { get, set };
+  });
+
+  expect(result.current.get("test")).toBeUndefined();
+
+  act(() => {
+    result.current.set({ key: "test", value: "aaaa" });
+  });
+
+  expect(result.current.get("test")).toBe("aaaa");
+
+  act(() => {
+    result.current.set({ key: "test" });
+  });
+
+  expect(result.current.get("test")).toBeUndefined();
+});
+
+test("doubleKeyCacheAtom", () => {
+  const { result } = renderHook(() => {
+    const atoms = useMemo(() => doubleKeyCacheAtom<string, string, string>(), []);
+    const get = useAtomValue(atoms.get);
+    const getAll = useAtomValue(atoms.getAll);
+    const set = useSetAtom(atoms.set);
+    return { get, set, getAll };
+  });
+
+  expect(result.current.get("test", "a")).toBeUndefined();
+  expect(result.current.get("test", "b")).toBeUndefined();
+  expect(result.current.get("test", "c")).toBeUndefined();
+
+  act(() => {
+    result.current.set({ key: "test", key2: "a", value: "aaaa" });
+    result.current.set({ key: "test", key2: "c", value: "ccc" });
+  });
+
+  expect(result.current.get("test", "a")).toBe("aaaa");
+  expect(result.current.get("test", "b")).toBeUndefined();
+  expect(result.current.get("test", "c")).toBe("ccc");
+  expect(result.current.getAll("test")).toEqual(["aaaa", "ccc"]);
+
+  act(() => {
+    result.current.set({ key: "test", key2: "a" });
+  });
+
+  expect(result.current.get("test", "a")).toBeUndefined();
+  expect(result.current.get("test", "b")).toBeUndefined();
+  expect(result.current.get("test", "c")).toBe("ccc");
+});
diff --git a/web/src/beta/core/mantle/atoms/cache.ts b/web/src/beta/core/mantle/atoms/cache.ts
new file mode 100644
index 0000000000..b3733d6572
--- /dev/null
+++ b/web/src/beta/core/mantle/atoms/cache.ts
@@ -0,0 +1,55 @@
+import { atom } from "jotai";
+
+export function cacheAtom<K, T>() {
+  const map = atom<Map<K, T> | undefined>(undefined);
+
+  const get = atom(get => (key: K) => get(map)?.get(key));
+
+  const set = atom(null, (get, set, value: { key: K; value?: T }) => {
+    const m = get(map) ?? new Map();
+    if (typeof value.value === "undefined") {
+      m.delete(value.key);
+    } else {
+      m.set(value.key, value.value);
+    }
+    set(map, m);
+  });
+
+  return { get, set };
+}
+
+export function doubleKeyCacheAtom<K, L, T>() {
+  const map = atom<Map<K, Map<L, T>> | undefined>(undefined);
+
+  const get = atom(get => (key: K, key2: L) => get(map)?.get(key)?.get(key2));
+
+  const getAll = atom(get => (key: K) => {
+    const m = get(map)?.get(key);
+    if (!m) return undefined;
+
+    const res: T[] = [];
+    for (const k of m.keys()) {
+      const v = m.get(k);
+      if (typeof v === "undefined") continue;
+      res.push(v);
+    }
+    return res;
+  });
+
+  const set = atom(null, (get, set, value: { key: K; key2: L; value?: T }) => {
+    const m: Map<K, Map<L, T>> = get(map) ?? new Map();
+    const n = m.get(value.key) ?? new Map();
+    if (typeof value.value === "undefined") {
+      n?.delete(value.key2);
+      if (n?.size === 0) {
+        m.delete(value.key);
+      }
+    } else {
+      n.set(value.key2, value.value);
+      m.set(value.key, n);
+    }
+    set(map, m);
+  });
+
+  return { get, set, getAll };
+}
diff --git a/web/src/beta/core/mantle/atoms/compute.test.ts b/web/src/beta/core/mantle/atoms/compute.test.ts
new file mode 100644
index 0000000000..19816c3a2a
--- /dev/null
+++ b/web/src/beta/core/mantle/atoms/compute.test.ts
@@ -0,0 +1,790 @@
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { useAtom } from "jotai";
+import { useMemo } from "react";
+import { test, expect, vi, beforeEach } from "vitest";
+
+import * as DataCache from "../data";
+import { EvalContext, evalLayer } from "../evaluator";
+import type { ComputedFeature, Data, DataRange, Feature, Layer, LayerSimple } from "../types";
+
+import { doubleKeyCacheAtom } from "./cache";
+import { computeAtom } from "./compute";
+
+type TestData = Data & { test_id: string };
+
+const data: TestData = {
+  test_id: "a",
+  type: "geojson",
+  url: "https://example.com/example.geojson",
+};
+const range: DataRange = { x: 0, y: 0, z: 0 };
+const layer: Layer = { id: "xxx", type: "simple", data };
+const features: Feature[] = [
+  { type: "feature", id: "a", geometry: { type: "Point", coordinates: [0, 0] } },
+];
+const features2: Feature[] = [
+  {
+    type: "feature",
+    id: "b",
+    geometry: { type: "Point", coordinates: [0, 0] },
+    range,
+  },
+];
+const features3: Feature[] = [
+  {
+    type: "feature",
+    id: "c",
+    geometry: { type: "Point", coordinates: [0, 0] },
+    range,
+  },
+];
+
+const toComputedFeature = (f: Feature[]): ComputedFeature[] =>
+  f.map(v => ({ ...v, type: "computedFeature" }));
+
+beforeEach(() => {
+  vi.resetAllMocks();
+});
+
+test("computeAtom", async () => {
+  const fetchDataMock = vi.spyOn(DataCache, "fetchData");
+  fetchDataMock.mockReturnValue(Promise.resolve(features));
+
+  const { result } = renderHook(() => {
+    const atoms = useMemo(() => computeAtom(doubleKeyCacheAtom<string, string, Feature[]>()), []);
+    const [result, set] = useAtom(atoms);
+    return { result, set };
+  });
+
+  expect(result.current.result).toBeUndefined();
+
+  act(() => {
+    result.current.set({ type: "setLayer", layer: { id: "xxx", type: "simple" } });
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: { id: "xxx", type: "simple" },
+    status: "ready",
+    features: [],
+    originalFeatures: [],
+  });
+
+  // set a layer with delegatedDataTypes
+  act(() => {
+    result.current.set({ type: "updateDelegatedDataTypes", delegatedDataTypes: ["geojson"] });
+  });
+
+  act(() => {
+    result.current.set({ type: "setLayer", layer });
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer,
+    status: "ready",
+    features: [],
+    originalFeatures: [],
+  }),
+    await waitFor(() =>
+      expect(result.current.result).toEqual({
+        id: "xxx",
+        layer,
+        status: "ready",
+        features: [],
+        originalFeatures: [],
+      }),
+    );
+
+  // delete delegatedDataTypes
+  act(() => {
+    result.current.set({ type: "updateDelegatedDataTypes", delegatedDataTypes: [] });
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer,
+    status: "fetching",
+    features: [],
+    originalFeatures: [],
+  });
+
+  await waitFor(() =>
+    expect(result.current.result).toEqual({
+      id: "xxx",
+      layer,
+      status: "ready",
+      features: toComputedFeature(features),
+      originalFeatures: features,
+    }),
+  );
+
+  // reset a layer
+  act(() => {
+    result.current.set({ type: "setLayer", layer });
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer,
+    status: "fetching",
+    features: toComputedFeature(features),
+    originalFeatures: features,
+  });
+
+  await waitFor(() => {
+    expect(result.current.result).toEqual({
+      id: "xxx",
+      layer,
+      status: "ready",
+      features: toComputedFeature(features),
+      originalFeatures: features,
+    });
+  });
+
+  // write features
+  act(() => {
+    result.current.set({ type: "writeFeatures", features: features2 });
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer,
+    status: "fetching",
+    features: toComputedFeature(features),
+    originalFeatures: [...features, ...features2],
+  });
+
+  await waitFor(() =>
+    expect(result.current.result).toEqual({
+      id: "xxx",
+      layer,
+      status: "ready",
+      features: [...toComputedFeature(features), ...toComputedFeature(features2)],
+      originalFeatures: [...features, ...features2],
+    }),
+  );
+
+  // set a layer with delegatedDataTypes
+  act(() => {
+    result.current.set({ type: "updateDelegatedDataTypes", delegatedDataTypes: ["geojson"] });
+  });
+
+  // write computed features
+  act(() => {
+    result.current.set({
+      type: "writeComputedFeatures",
+      value: { feature: features3, computed: toComputedFeature(features3) },
+    });
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer,
+    status: "fetching",
+    features: [...toComputedFeature(features), ...toComputedFeature(features2)],
+    originalFeatures: [...features, ...features3],
+  });
+
+  await waitFor(() =>
+    expect(result.current.result).toEqual({
+      id: "xxx",
+      layer,
+      status: "ready",
+      features: [
+        ...toComputedFeature(features),
+        ...toComputedFeature(features2),
+        ...toComputedFeature(features3),
+      ],
+      originalFeatures: [...features, ...features3],
+    }),
+  );
+
+  // delete computed features
+  act(() => {
+    result.current.set({
+      type: "deleteComputedFeatures",
+      features: ["c"],
+    });
+  });
+
+  await waitFor(() =>
+    expect(result.current.result).toEqual({
+      id: "xxx",
+      layer,
+      status: "ready",
+      features: [...toComputedFeature(features), ...toComputedFeature(features2)],
+      originalFeatures: [...features],
+    }),
+  );
+
+  // delete delegatedDataTypes
+  act(() => {
+    result.current.set({ type: "updateDelegatedDataTypes", delegatedDataTypes: [] });
+  });
+
+  // override appearances
+  act(() => {
+    result.current.set({
+      type: "override",
+      overrides: {
+        marker: { pointColor: "red" },
+        hogehoge: { foobar: 1 }, // invalid appearance
+      },
+    });
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer,
+    status: "fetching",
+    features: [...features, ...features2].map(f => ({
+      ...f,
+      type: "computedFeature",
+      marker: { pointColor: "red" },
+    })),
+    originalFeatures: [...features],
+  });
+
+  // delete a feature b
+  act(() => {
+    result.current.set({ type: "override" });
+    result.current.set({ type: "deleteFeatures", features: ["b"] });
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer,
+    status: "fetching",
+    features: [...toComputedFeature(features), ...toComputedFeature(features2)],
+    originalFeatures: [...features],
+  });
+
+  await waitFor(() =>
+    expect(result.current.result).toEqual({
+      id: "xxx",
+      layer,
+      status: "ready",
+      features: [...toComputedFeature(features)],
+      originalFeatures: [...features],
+    }),
+  );
+
+  // delete a feature "a"
+  act(() => {
+    result.current.set({ type: "override" });
+    result.current.set({ type: "deleteFeatures", features: ["a"] });
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer,
+    status: "fetching",
+    features: [...toComputedFeature(features)],
+    originalFeatures: [],
+  });
+
+  await waitFor(() =>
+    expect(result.current.result).toEqual({
+      id: "xxx",
+      layer,
+      status: "ready",
+      features: [],
+      originalFeatures: [],
+    }),
+  );
+
+  // delete a layer
+  act(() => {
+    result.current.set({ type: "setLayer" });
+  });
+
+  expect(result.current.result).toBeUndefined();
+});
+
+test("computeAtom with cache", async () => {
+  const fetchDataMock = vi.spyOn(DataCache, "fetchData");
+  fetchDataMock.mockImplementation(async data => {
+    return [
+      {
+        type: "feature",
+        id: (data as any).test_id || "",
+        geometry: data.value?.geometry || { type: "Point", coordinates: [0, 0] },
+      },
+    ];
+  });
+  const internalFeatures: Feature[] = [
+    { type: "feature", id: features[0].id, geometry: { type: "Point", coordinates: [1, 1] } },
+  ];
+  const { result } = renderHook(() => {
+    const atoms = useMemo(() => computeAtom(doubleKeyCacheAtom<string, string, Feature[]>()), []);
+    const [result, set] = useAtom(atoms);
+    return { result, set };
+  });
+
+  expect(result.current.result).toBeUndefined();
+
+  // Set data.url
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "setLayer",
+        layer: {
+          id: "xxx",
+          type: "simple",
+          data,
+        },
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data,
+    },
+    status: "ready",
+    features: toComputedFeature(features),
+    originalFeatures: [...features],
+  });
+
+  expect(fetchDataMock).toBeCalledTimes(1);
+
+  const geometryOnlyData = {
+    test_id: "a",
+    type: "geojson",
+    value: { type: "feature", geometry: internalFeatures[0].geometry },
+  } as TestData;
+
+  // Set `data.value` and add marker property.
+  // It should replace existing cache with new data.
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "setLayer",
+        layer: {
+          id: "xxx",
+          type: "simple",
+          data: geometryOnlyData,
+          marker: {
+            imageColor: "black",
+          },
+        },
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data: geometryOnlyData,
+      marker: {
+        imageColor: "black",
+      },
+    },
+    status: "ready",
+    features: toComputedFeature(internalFeatures),
+    originalFeatures: [...internalFeatures],
+  });
+
+  expect(fetchDataMock).toBeCalledTimes(2);
+
+  // Set same `data.value` and change marker imageColor.
+  // It should not replace existing cache when same data is specified.
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "setLayer",
+        layer: {
+          id: "xxx",
+          type: "simple",
+          data: geometryOnlyData,
+          marker: {
+            imageColor: "white",
+          },
+        },
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data: geometryOnlyData,
+      marker: {
+        imageColor: "white",
+      },
+    },
+    status: "ready",
+    features: toComputedFeature(internalFeatures),
+    originalFeatures: [...internalFeatures],
+  });
+
+  // It should be invoked even if the data is same when data doesn't have cache key.
+  expect(fetchDataMock).toBeCalledTimes(3);
+
+  // Set `data.url`.
+  // It should replace existing cache with new data.
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "setLayer",
+        layer: {
+          id: "xxx",
+          type: "simple",
+          data: {
+            test_id: "a",
+            type: "geojson",
+            url: "https://example.com/example-1.geojson",
+          } as TestData,
+        },
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data: {
+        test_id: "a",
+        type: "geojson",
+        url: "https://example.com/example-1.geojson",
+      },
+    },
+    status: "ready",
+    features: [
+      { type: "computedFeature", id: "a", geometry: { type: "Point", coordinates: [0, 0] } },
+    ],
+    originalFeatures: [
+      { type: "feature", id: "a", geometry: { type: "Point", coordinates: [0, 0] } },
+    ],
+  });
+
+  expect(fetchDataMock).toBeCalledTimes(4);
+});
+
+test("computeAtom only value", async () => {
+  const data: TestData = {
+    test_id: "xxx",
+    type: "geojson",
+    value: {
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [1, 1],
+      },
+    },
+  };
+  const features: Feature[] = [
+    { type: "feature", id: "xxx", geometry: { type: "Point", coordinates: [1, 1] } },
+  ];
+  const features2: Feature[] = [
+    { type: "feature", id: "zzz", geometry: { type: "Point", coordinates: [100, 100] } },
+  ];
+  const features3: Feature[] = [
+    { type: "feature", id: "zzz", geometry: { type: "Point", coordinates: [1000, 1000] } },
+  ];
+  const fetchDataMock = vi.spyOn(DataCache, "fetchData");
+  fetchDataMock.mockImplementation(async data => {
+    return [
+      {
+        type: "feature",
+        id: (data as any).test_id || "",
+        geometry: data.value?.geometry || { type: "Point", coordinates: [0, 0] },
+        properties: undefined,
+        range: undefined,
+      },
+    ];
+  });
+  const internalFeatures: Feature[] = [
+    { type: "feature", id: features[0].id, geometry: { type: "Point", coordinates: [1, 1] } },
+  ];
+  const internalFeatures2: Feature[] = [
+    { type: "feature", id: features2[0].id, geometry: { type: "Point", coordinates: [100, 100] } },
+  ];
+  const internalFeatures3: Feature[] = [
+    {
+      type: "feature",
+      id: features3[0].id,
+      geometry: { type: "Point", coordinates: [1000, 1000] },
+    },
+  ];
+  const { result } = renderHook(() => {
+    const atoms = useMemo(() => computeAtom(doubleKeyCacheAtom<string, string, Feature[]>()), []);
+    const [result, set] = useAtom(atoms);
+    return { result, set };
+  });
+
+  expect(result.current.result).toBeUndefined();
+
+  // Set data.value
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "setLayer",
+        layer: {
+          id: "xxx",
+          type: "simple",
+          data,
+        },
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data,
+    },
+    status: "ready",
+    features: toComputedFeature(features),
+    originalFeatures: [...features],
+  });
+
+  expect(fetchDataMock).toBeCalledTimes(1);
+
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "setLayer",
+        layer: {
+          id: "xxx",
+          type: "simple",
+          data,
+          marker: {
+            imageColor: "black",
+          },
+        },
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data,
+      marker: {
+        imageColor: "black",
+      },
+    },
+    status: "ready",
+    features: toComputedFeature(internalFeatures),
+    originalFeatures: [...internalFeatures],
+  });
+
+  // Should not fetch if value is not changed
+  expect(fetchDataMock).toBeCalledTimes(1);
+
+  const changedData = {
+    ...data,
+    test_id: "zzz",
+    value: {
+      ...data.value,
+      geometry: {
+        type: "Point",
+        coordinates: [100, 100],
+      },
+    },
+  };
+
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "setLayer",
+        layer: {
+          id: "xxx",
+          type: "simple",
+          data: changedData,
+          marker: {
+            imageColor: "black",
+          },
+        },
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data: changedData,
+      marker: {
+        imageColor: "black",
+      },
+    },
+    status: "ready",
+    features: toComputedFeature(internalFeatures2),
+    originalFeatures: [...internalFeatures2],
+  });
+
+  // Should fetch if value is changed
+  expect(fetchDataMock).toBeCalledTimes(2);
+
+  const otherData: TestData = {
+    ...data,
+    type: "csv",
+    test_id: "zzz",
+    value: {
+      ...data.value,
+      geometry: {
+        type: "Point",
+        coordinates: [1000, 1000],
+      },
+    },
+  };
+
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "setLayer",
+        layer: {
+          id: "xxx",
+          type: "simple",
+          data: otherData,
+          marker: {
+            imageColor: "black",
+          },
+        },
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data: otherData,
+      marker: {
+        imageColor: "black",
+      },
+    },
+    status: "ready",
+    features: toComputedFeature(internalFeatures3),
+    originalFeatures: [...internalFeatures3],
+  });
+
+  // Should fetch if value is changed
+  expect(fetchDataMock).toBeCalledTimes(3);
+});
+
+test("forceUpdateFeatures", async () => {
+  const fetchDataMock = vi.spyOn(DataCache, "fetchData");
+  fetchDataMock.mockImplementation(async data => {
+    return [
+      {
+        type: "feature",
+        id: (data as any).test_id || "",
+        geometry: data.value?.geometry || { type: "Point", coordinates: [0, 0] },
+      },
+    ];
+  });
+  const { result } = renderHook(() => {
+    const atoms = useMemo(() => computeAtom(doubleKeyCacheAtom<string, string, Feature[]>()), []);
+    const [result, set] = useAtom(atoms);
+    return { result, set };
+  });
+
+  expect(result.current.result).toBeUndefined();
+
+  // Set data.url
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "setLayer",
+        layer: {
+          id: "xxx",
+          type: "simple",
+          data,
+        },
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data,
+    },
+    status: "ready",
+    features: toComputedFeature(features),
+    originalFeatures: [...features],
+  });
+
+  expect(fetchDataMock).toBeCalledTimes(1);
+
+  // Set same data
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "setLayer",
+        layer: {
+          id: "xxx",
+          type: "simple",
+          data,
+        },
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data,
+    },
+    status: "ready",
+    features: toComputedFeature(features),
+    originalFeatures: [...features],
+  });
+
+  // Should cache is used
+  expect(fetchDataMock).toBeCalledTimes(1);
+
+  // Force update
+  await act(async () => {
+    await waitFor(() =>
+      result.current.set({
+        type: "forceUpdateFeatures",
+      }),
+    );
+  });
+
+  expect(result.current.result).toEqual({
+    id: "xxx",
+    layer: {
+      id: "xxx",
+      type: "simple",
+      data,
+    },
+    status: "ready",
+    features: toComputedFeature(features),
+    originalFeatures: [...features],
+  });
+
+  // Should fetch is invoked
+  expect(fetchDataMock).toBeCalledTimes(2);
+});
+
+vi.mock("../evaluator", (): { evalLayer: typeof evalLayer } => ({
+  evalLayer: async (layer: LayerSimple, ctx: EvalContext) => {
+    if (!layer.data) return { layer: {}, features: undefined };
+    return { layer: {}, features: toComputedFeature((await ctx.getAllFeatures(layer.data)) || []) };
+  },
+}));
diff --git a/web/src/beta/core/mantle/atoms/compute.ts b/web/src/beta/core/mantle/atoms/compute.ts
new file mode 100644
index 0000000000..26f6a1c6b5
--- /dev/null
+++ b/web/src/beta/core/mantle/atoms/compute.ts
@@ -0,0 +1,315 @@
+import { atom } from "jotai";
+import { merge, pick, isEqual } from "lodash-es";
+
+import { processGeoJSON } from "../data/geojson";
+import { evalLayer, EvalResult } from "../evaluator";
+import type {
+  ComputedFeature,
+  ComputedLayer,
+  ComputedLayerStatus,
+  Data,
+  DataRange,
+  DataType,
+  Feature,
+  Layer,
+} from "../types";
+import { appearanceKeys } from "../types";
+
+import { dataAtom, DATA_CACHE_KEYS, globalDataFeaturesCache } from "./data";
+
+export type Atom = ReturnType<typeof computeAtom>;
+
+export type Command =
+  | { type: "setLayer"; layer?: Layer }
+  | { type: "requestFetch"; range: DataRange }
+  | { type: "writeFeatures"; features: Feature[] }
+  | { type: "writeComputedFeatures"; value: { feature: Feature[]; computed: ComputedFeature[] } }
+  | { type: "deleteFeatures"; features: string[] }
+  | { type: "deleteComputedFeatures"; features: string[] }
+  | { type: "override"; overrides?: Record<string, any> }
+  | { type: "updateDelegatedDataTypes"; delegatedDataTypes: DataType[] }
+  | { type: "forceUpdateFeatures" };
+
+export function computeAtom(cache?: typeof globalDataFeaturesCache) {
+  const delegatedDataTypes = atom<DataType[]>([]);
+  const updateDelegatedDataTypes = atom(null, async (_, set, value: DataType[]) => {
+    set(delegatedDataTypes, value);
+    await set(compute, undefined);
+  });
+
+  const layer = atom<Layer | undefined>(undefined);
+  const overrides = atom<Record<string, any> | undefined, Record<string, any> | undefined>(
+    undefined,
+    (_, set, value) => {
+      set(overrides, pick(value, appearanceKeys));
+    },
+  );
+
+  const computedResult = atom<EvalResult | undefined>(undefined);
+  const finalFeatures = atom(get =>
+    get(computedResult)?.features?.map((f): ComputedFeature => merge({ ...f }, get(overrides))),
+  );
+  const layerStatus = atom<ComputedLayerStatus>("fetching");
+  const dataAtoms = dataAtom(cache);
+
+  const get = atom((get): ComputedLayer | undefined => {
+    const currentLayer = get(layer);
+    if (!currentLayer) return;
+
+    return {
+      id: currentLayer.id,
+      layer: currentLayer,
+      status: get(layerStatus),
+      features: get(finalFeatures) ?? [],
+      originalFeatures:
+        currentLayer.type === "simple" && currentLayer.data
+          ? get(dataAtoms.getAll)(currentLayer.id, currentLayer.data)?.flat() ?? []
+          : [],
+      ...get(computedResult)?.layer,
+    };
+  });
+
+  const compute = atom(null, async (get, set, value: { forceUpdateData: boolean } | undefined) => {
+    const currentLayer = get(layer);
+    if (!currentLayer) return;
+
+    if (currentLayer.type !== "simple" || !currentLayer.data) {
+      set(layerStatus, "ready");
+      return;
+    }
+
+    const layerId = currentLayer.id;
+
+    // To write feature with delegated data, you should use `writeComputedFeature` atom.
+    if (get(delegatedDataTypes).includes(currentLayer.data.type)) {
+      set(layerStatus, "ready");
+      return;
+    }
+
+    set(layerStatus, "fetching");
+
+    const shouldFetch = (prevFeatures: Feature[] | undefined) => {
+      if (currentLayer.type !== "simple") {
+        return false;
+      }
+
+      // `data.url` should be cached on dataAtoms, so we can return true in this line.
+      if (currentLayer.data?.url || !currentLayer.data?.value) {
+        return true;
+      }
+
+      // Only support geojson for specifying direct feature.
+      if (currentLayer.data?.type !== "geojson") {
+        return true;
+      }
+
+      const curFeatures = processGeoJSON(currentLayer.data.value);
+      if (curFeatures.length === prevFeatures?.length) {
+        return !curFeatures.every((cur, i) => {
+          const prev = prevFeatures[i];
+          return isEqual({ ...cur, id: "" }, { ...prev, id: "" });
+        });
+      }
+
+      return true;
+    };
+
+    // Used for a simple layer.
+    // It retrieves all features for the layer stored in the cache,
+    // but attempts to retrieve data from the network if the main feature is not yet in the cache.
+    const getAllFeatures = async (data: Data) => {
+      const getterAll = get(dataAtoms.getAll);
+      const allFeatures = getterAll(layerId, data);
+
+      const flattenAllFeatures = allFeatures?.flat();
+
+      // Ignore cache if data is embedded
+      if (
+        !value?.forceUpdateData &&
+        allFeatures &&
+        // Check if data has cache key
+        DATA_CACHE_KEYS.every(k => !!data[k])
+      ) {
+        return flattenAllFeatures;
+      }
+
+      if (!value?.forceUpdateData && !shouldFetch(flattenAllFeatures)) {
+        return flattenAllFeatures;
+      }
+
+      await set(dataAtoms.fetch, { data, layerId, forceUpdateData: value?.forceUpdateData });
+      return getterAll(layerId, data)?.flat() ?? [];
+    };
+
+    // Used for a flow layer.
+    // Retrieves and returns only a specific range of features from the cache.
+    // If it is not stored in the cache, it attempts to retrieve the data from the network.
+    const getFeatures = async (data: Data, range?: DataRange) => {
+      const getter = get(dataAtoms.get);
+      const c = getter(layerId, data, range);
+
+      // Ignore cache if data is embedded
+      if (c) return c;
+
+      if (!shouldFetch(c)) {
+        return c;
+      }
+
+      await set(dataAtoms.fetch, { data, range, layerId });
+      return getter(layerId, data, range);
+    };
+
+    const result = await evalLayer(currentLayer, { getFeatures, getAllFeatures });
+    set(layerStatus, "ready");
+    set(computedResult, result);
+  });
+
+  const set = atom(null, async (_get, set, value: Layer | undefined) => {
+    set(layer, value);
+    await set(compute, undefined);
+  });
+
+  const requestFetch = atom(null, async (get, set, value: DataRange) => {
+    const currentLayer = get(layer);
+    if (currentLayer?.type !== "simple" || !currentLayer.data) return;
+
+    await set(dataAtoms.fetch, { data: currentLayer.data, range: value, layerId: currentLayer.id });
+  });
+
+  const writeFeatures = atom(null, async (get, set, value: Feature[]) => {
+    const currentLayer = get(layer);
+    if (currentLayer?.type !== "simple" || !currentLayer.data) return;
+
+    set(dataAtoms.set, {
+      data: currentLayer.data,
+      features: value,
+      layerId: currentLayer.id,
+    });
+    await set(compute, undefined);
+  });
+
+  const writeComputedFeatures = atom(
+    null,
+    async (get, set, value: { feature: Feature[]; computed: ComputedFeature[] }) => {
+      const currentLayer = get(layer);
+      if (currentLayer?.type !== "simple" || !currentLayer.data) return;
+
+      if (import.meta.env.DEV) {
+        if (!get(delegatedDataTypes).includes(currentLayer.data.type)) {
+          throw new Error("writeComputedFeature can be called with delegated data");
+        }
+      }
+
+      set(layerStatus, "fetching");
+
+      set(dataAtoms.set, {
+        data: currentLayer.data,
+        features: value.feature,
+        layerId: currentLayer.id,
+      });
+
+      const computedLayer = await evalLayer(currentLayer, {
+        getAllFeatures: async () => undefined,
+        getFeatures: async () => undefined,
+      });
+
+      if (!computedLayer) {
+        return;
+      }
+
+      set(layerStatus, "ready");
+
+      const prevResult = get(computedResult);
+
+      const result = {
+        layer: computedLayer.layer,
+        features: [...(prevResult?.features || []), ...value.computed],
+      };
+
+      set(computedResult, result);
+    },
+  );
+
+  const deleteFeatures = atom(null, async (get, set, value: string[]) => {
+    const currentLayer = get(layer);
+    if (currentLayer?.type !== "simple" || !currentLayer?.data) return;
+
+    set(dataAtoms.deleteAll, {
+      data: currentLayer.data,
+      features: value,
+      layerId: currentLayer.id,
+    });
+    await set(compute, undefined);
+  });
+
+  const deleteComputedFeatures = atom(null, async (get, set, value: string[]) => {
+    const currentLayer = get(layer);
+    if (currentLayer?.type !== "simple" || !currentLayer?.data) return;
+
+    if (import.meta.env.DEV) {
+      if (!get(delegatedDataTypes).includes(currentLayer.data.type)) {
+        throw new Error("deleteComputedFeatures can be called with delegated data");
+      }
+    }
+
+    set(dataAtoms.deleteAll, {
+      data: currentLayer.data,
+      features: value,
+      layerId: currentLayer.id,
+    });
+
+    const prevResult = get(computedResult);
+
+    if (!prevResult?.layer) {
+      return;
+    }
+
+    const result = {
+      layer: prevResult?.layer,
+      features: prevResult?.features?.filter(f => !value.includes(f.id)) || [],
+    };
+
+    set(computedResult, result);
+  });
+
+  const forceUpdateFeatures = atom(null, async (get, set, _: any) => {
+    const currentLayer = get(layer);
+    if (currentLayer?.type !== "simple" || !currentLayer?.data) return;
+    await set(compute, { forceUpdateData: true });
+  });
+
+  return atom<ComputedLayer | undefined, Command>(
+    g => g(get),
+    async (_, s, value) => {
+      switch (value.type) {
+        case "setLayer":
+          await s(set, value.layer);
+          break;
+        case "requestFetch":
+          await s(requestFetch, value.range);
+          break;
+        case "writeFeatures":
+          await s(writeFeatures, value.features);
+          break;
+        case "writeComputedFeatures":
+          await s(writeComputedFeatures, value.value);
+          break;
+        case "deleteFeatures":
+          await s(deleteFeatures, value.features);
+          break;
+        case "deleteComputedFeatures":
+          await s(deleteComputedFeatures, value.features);
+          break;
+        case "override":
+          await s(overrides, value.overrides);
+          break;
+        case "updateDelegatedDataTypes":
+          await s(updateDelegatedDataTypes, value.delegatedDataTypes);
+          break;
+        case "forceUpdateFeatures":
+          await s(forceUpdateFeatures, undefined);
+          break;
+      }
+    },
+  );
+}
diff --git a/web/src/beta/core/mantle/atoms/data.test.ts b/web/src/beta/core/mantle/atoms/data.test.ts
new file mode 100644
index 0000000000..0a03150933
--- /dev/null
+++ b/web/src/beta/core/mantle/atoms/data.test.ts
@@ -0,0 +1,182 @@
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { useAtomValue, useSetAtom } from "jotai";
+import { useMemo } from "react";
+import { test, expect, vi } from "vitest";
+
+import { fetchData } from "../data";
+import type { Data, DataRange, Feature } from "../types";
+
+import { doubleKeyCacheAtom } from "./cache";
+import { dataAtom } from "./data";
+
+const data: Data = { type: "geojson", url: "https://example.com/example.geojson" };
+const range: DataRange = { x: 0, y: 0, z: 0 };
+const features: Feature[] = [
+  { type: "feature", id: "a", geometry: { type: "Point", coordinates: [0, 0] } },
+];
+const features2: Feature[] = [
+  { type: "feature", id: "a", geometry: { type: "Point", coordinates: [0, 0] }, range },
+];
+const features3: Feature[] = [
+  { type: "feature", id: "a", geometry: { type: "Point", coordinates: [0, 0] }, range },
+  { type: "feature", id: "b", geometry: { type: "Point", coordinates: [0, 0] }, range },
+  { type: "feature", id: "c", geometry: { type: "Point", coordinates: [0, 0] }, range },
+];
+
+test("dataAtom set", () => {
+  const layerId = "x";
+
+  const { result } = renderHook(() => {
+    const atoms = useMemo(() => dataAtom(doubleKeyCacheAtom<string, string, Feature[]>()), []);
+    const get = useAtomValue(atoms.get);
+    const getAll = useAtomValue(atoms.getAll);
+    const set = useSetAtom(atoms.set);
+    return { get, set, getAll };
+  });
+
+  expect(result.current.get(layerId, data)).toBeUndefined();
+
+  act(() => {
+    result.current.set({ layerId, data, features });
+  });
+
+  expect(result.current.get(layerId, data)).toEqual(features);
+  expect(result.current.getAll(layerId, data)).toEqual([features]);
+  expect(result.current.get(layerId, data, range)).toBeUndefined();
+
+  act(() => {
+    result.current.set({ layerId, data, features: features2 });
+  });
+
+  expect(result.current.get(layerId, data, range)).toEqual(features2);
+  expect(result.current.getAll(layerId, data)).toEqual([features, features2]);
+});
+
+test("dataAtom fetch", async () => {
+  const layerId = "x";
+
+  const { result } = renderHook(() => {
+    const atoms = useMemo(() => dataAtom(doubleKeyCacheAtom<string, string, Feature[]>()), []);
+    const get = useAtomValue(atoms.get);
+    const getAll = useAtomValue(atoms.getAll);
+    const fetch = useSetAtom(atoms.fetch);
+    return { get, fetch, getAll };
+  });
+
+  expect(result.current.get(layerId, data)).toBeUndefined();
+  expect(result.current.getAll(layerId, data)).toBeUndefined();
+
+  act(() => {
+    result.current.fetch({ layerId, data });
+  });
+
+  await waitFor(() => expect(result.current.get(layerId, data)).toEqual(features));
+  expect(result.current.get(layerId, data, range)).toBeUndefined();
+  expect(result.current.getAll(layerId, data)).toEqual([features]);
+});
+
+test("dataAtom deleteAll", async () => {
+  const layerId = "x";
+
+  const { result } = renderHook(() => {
+    const atoms = useMemo(() => dataAtom(doubleKeyCacheAtom<string, string, Feature[]>()), []);
+    const get = useAtomValue(atoms.get);
+    const getAll = useAtomValue(atoms.getAll);
+    const set = useSetAtom(atoms.set);
+    const deleteAll = useSetAtom(atoms.deleteAll);
+    return { get, getAll, set, deleteAll };
+  });
+
+  act(() => {
+    result.current.set({ layerId, data, features: features3 });
+  });
+
+  await waitFor(() => expect(result.current.get(layerId, data, range)).toEqual(features3));
+
+  act(() => {
+    result.current.deleteAll({ layerId, data, features: ["b"] });
+  });
+
+  await waitFor(() =>
+    expect(result.current.get(layerId, data, range)).toEqual([features3[0], features3[2]]),
+  );
+});
+
+test("dataAtom double fetch", async () => {
+  const layerId = "x";
+
+  const { result } = renderHook(() => {
+    const atoms1 = useMemo(() => dataAtom(doubleKeyCacheAtom<string, string, Feature[]>()), []);
+    const atoms2 = useMemo(() => dataAtom(doubleKeyCacheAtom<string, string, Feature[]>()), []);
+    const getAll1 = useAtomValue(atoms1.getAll);
+    const fetch1 = useSetAtom(atoms1.fetch);
+    const getAll2 = useAtomValue(atoms2.getAll);
+    const fetch2 = useSetAtom(atoms2.fetch);
+    return { fetch1, getAll1, fetch2, getAll2 };
+  });
+
+  const { fetchData } = await import("../data");
+
+  expect(result.current.getAll1(layerId, data)).toBeUndefined();
+  expect(result.current.getAll2(layerId, data)).toBeUndefined();
+  expect(fetchData).toBeCalledTimes(1);
+
+  act(() => {
+    result.current.fetch1({ layerId, data });
+    result.current.fetch2({ layerId, data });
+  });
+
+  await waitFor(() => expect(result.current.getAll1(layerId, data)).toEqual([features]));
+  await waitFor(() => expect(result.current.getAll2(layerId, data)).toEqual([features]));
+  expect(fetchData).toBeCalledTimes(3);
+});
+
+test("data.value is present", async () => {
+  const layerId = "x";
+  const data1: Data = {
+    type: "geojson",
+    value: { id: "f", type: "feature", geometry: { type: "Point", coordinates: [1, 2] } },
+  };
+  const data2: Data = {
+    type: "geojson",
+    value: { id: "g", type: "feature", geometry: { type: "Point", coordinates: [2, 3] } },
+  };
+
+  const { result } = renderHook(() => {
+    const atoms = useMemo(() => dataAtom(doubleKeyCacheAtom<string, string, Feature[]>()), []);
+    const getAll = useAtomValue(atoms.getAll);
+    const fetch = useSetAtom(atoms.fetch);
+    return { fetch, getAll };
+  });
+
+  expect(result.current.getAll(layerId, data1)).toBeUndefined();
+
+  act(() => {
+    result.current.fetch({ layerId, data: data1 });
+  });
+
+  await waitFor(() =>
+    expect(result.current.getAll(layerId, data1)).toEqual([
+      [{ type: "feature", id: "f", geometry: { type: "Point", coordinates: [1, 2] } }],
+    ]),
+  );
+
+  act(() => {
+    console.log("ACT");
+    result.current.fetch({ layerId, data: data2 });
+  });
+
+  await waitFor(() =>
+    expect(result.current.getAll(layerId, data1)).toEqual([
+      [{ type: "feature", id: "g", geometry: { type: "Point", coordinates: [2, 3] } }],
+    ]),
+  );
+});
+
+vi.mock("../data", (): { fetchData: typeof fetchData } => ({
+  fetchData: vi.fn(async data =>
+    data.value
+      ? [{ type: "feature", id: data.value.id, geometry: data.value.geometry } as Feature]
+      : features,
+  ),
+}));
diff --git a/web/src/beta/core/mantle/atoms/data.ts b/web/src/beta/core/mantle/atoms/data.ts
new file mode 100644
index 0000000000..cd6291ca56
--- /dev/null
+++ b/web/src/beta/core/mantle/atoms/data.ts
@@ -0,0 +1,114 @@
+import { atom } from "jotai";
+import { groupBy } from "lodash-es";
+
+import { fetchData } from "../data";
+import type { Feature, Data, DataRange } from "../types";
+
+import { doubleKeyCacheAtom } from "./cache";
+
+export const globalDataFeaturesCache = doubleKeyCacheAtom<string, string, Feature[]>();
+
+export function dataAtom(cacheAtoms = globalDataFeaturesCache) {
+  const fetching = atom<[string, string, AbortController][]>([]);
+
+  const get = atom(
+    get => (layerId: string, data: Data, range?: DataRange) =>
+      get(cacheAtoms.get)(dataKey(layerId, data), rangeKey(range)),
+  );
+
+  const getAll = atom(
+    get => (layerId: string, data: Data) => get(cacheAtoms.getAll)(dataKey(layerId, data)),
+  );
+
+  const set = atom(
+    null,
+    async (_get, set, value: { data: Data; features: Feature[]; layerId: string }) => {
+      Object.entries(groupBy(value.features, f => rangeKey(f.range))).forEach(([k, v]) => {
+        set(cacheAtoms.set, {
+          key: dataKey(value.layerId, value.data),
+          key2: k,
+          value: v,
+        });
+      });
+    },
+  );
+
+  const deleteAll = atom(
+    null,
+    async (get, set, value: { data: Data; features: string[]; layerId: string }) => {
+      const d = dataKey(value.layerId, value.data);
+      Object.entries(
+        groupBy(
+          get(getAll)(value.layerId, value.data)
+            ?.filter(f => f.length)
+            .map(
+              f =>
+                [rangeKey(f[0].range), f, f.filter(g => !value.features.includes(g.id))] as const,
+            )
+            .filter(f => f[1].length !== f[2].length),
+          g => g[0],
+        ),
+      ).forEach(([k, f]) => {
+        set(cacheAtoms.set, {
+          key: d,
+          key2: k,
+          value: f.flatMap(g => g[2]),
+        });
+      });
+    },
+  );
+
+  const fetch = atom(
+    null,
+    async (
+      get,
+      set,
+      value: { data: Data; range?: DataRange; layerId: string; forceUpdateData?: boolean },
+    ) => {
+      const k = dataKey(value.layerId, value.data);
+      if (!k) return;
+
+      const rk = rangeKey(value.range);
+      const cached =
+        !value.forceUpdateData && !value.data.value && value.data.url
+          ? get(cacheAtoms.get)(k, rk)
+          : undefined;
+      if (cached) return;
+      const status = get(fetching).find(e => e[0] === k && e[1] === rk);
+      if (status) {
+        status[2].abort();
+      }
+
+      try {
+        const abort = new AbortController();
+        set(fetching, f => [...f, [k, rk, abort]]);
+        const features = await fetchData(value.data, value.range, { signal: abort.signal });
+        if (features) {
+          set(cacheAtoms.set, { key: k, key2: rk, value: features });
+        }
+      } catch (e) {
+        // Do nothing
+      } finally {
+        set(fetching, f => f.filter(e => e[0] !== k || e[1] !== rk));
+      }
+    },
+  );
+
+  return {
+    get,
+    getAll,
+    set,
+    fetch,
+    deleteAll,
+  };
+}
+
+export const DATA_CACHE_KEYS: (keyof Pick<Data, "type" | "url">)[] = ["type", "url"];
+
+function dataKey(layerId: string, data: Data): string {
+  return !data.value && data.url ? DATA_CACHE_KEYS.map(k => data[k]).join(":") : `layer:${layerId}`;
+}
+
+function rangeKey(range?: DataRange): string {
+  return range ? `${range.x}:${range.y}:${range.z}` : "";
+}
diff --git a/web/src/beta/core/mantle/atoms/index.ts b/web/src/beta/core/mantle/atoms/index.ts
new file mode 100644
index 0000000000..475935e7d6
--- /dev/null
+++ b/web/src/beta/core/mantle/atoms/index.ts
@@ -0,0 +1 @@
+export { computeAtom, type Atom } from "./compute";
diff --git a/web/src/beta/core/mantle/compat/backward.test.ts b/web/src/beta/core/mantle/compat/backward.test.ts
new file mode 100644
index 0000000000..5aca41cd82
--- /dev/null
+++ b/web/src/beta/core/mantle/compat/backward.test.ts
@@ -0,0 +1,366 @@
+import { expect, test } from "vitest";
+
+import { convertLayer, getCompat } from "./backward";
+import type { Infobox, Tag } from "./types";
+
+const infobox: Infobox = { blocks: [], property: { default: { bgcolor: "red" } } };
+const tags: Tag[] = [{ id: "x", label: "x" }];
+
+test("group", () => {
+  expect(
+    convertLayer({
+      id: "xxx",
+      type: "group",
+      children: [
+        {
+          id: "yyy",
+          type: "group",
+          children: [],
+        },
+      ],
+      visible: true,
+      compat: {
+        property: { a: 1 },
+        propertyId: "p",
+        extensionId: "hoge",
+      },
+      title: "title",
+      creator: "creator",
+      infobox,
+      tags,
+    }),
+  ).toEqual({
+    id: "xxx",
+    children: [
+      {
+        id: "yyy",
+        children: [],
+      },
+    ],
+    title: "title",
+    isVisible: true,
+    creator: "creator",
+    infobox,
+    tags,
+    pluginId: "reearth",
+    extensionId: "hoge",
+    property: { a: 1 },
+    propertyId: "p",
+  });
+});
+
+test("item", () => {
+  expect(
+    convertLayer({
+      id: "xxx",
+      type: "simple",
+      visible: true,
+      compat: {
+        property: { a: 1 },
+        propertyId: "p",
+        extensionId: "hoge",
+      },
+      title: "title",
+      creator: "creator",
+      infobox,
+      tags,
+    }),
+  ).toEqual({
+    id: "xxx",
+    isVisible: true,
+    title: "title",
+    creator: "creator",
+    infobox,
+    tags,
+    pluginId: "reearth",
+    extensionId: "hoge",
+    property: { a: 1 },
+    propertyId: "p",
+  });
+});
+
+test("getCompat", () => {
+  expect(getCompat(undefined)).toBeUndefined();
+  expect(getCompat({ type: "aaa" } as any)).toBeUndefined();
+});
+
+test("marker", () => {
+  expect(
+    getCompat({
+      id: "xxx",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [1, 2, 3],
+          },
+        },
+      },
+      marker: {
+        pointColor: "red",
+      },
+      compat: {
+        propertyId: "p",
+      },
+    }),
+  ).toEqual({
+    extensionId: "marker",
+    propertyId: "p",
+    property: {
+      default: {
+        location: { lat: 2, lng: 1 },
+        height: 3,
+        pointColor: "red",
+      },
+    },
+  });
+});
+
+test("polyline", () => {
+  expect(
+    getCompat({
+      id: "xxx",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "LineString",
+            coordinates: [
+              [1, 2, 3],
+              [2, 3, 4],
+            ],
+          },
+        },
+      },
+      polyline: {
+        strokeColor: "red",
+      },
+      compat: {
+        propertyId: "p",
+      },
+    } as any),
+  ).toEqual({
+    extensionId: "polyline",
+    propertyId: "p",
+    property: {
+      default: {
+        coordinates: [
+          { lat: 2, lng: 1, height: 3 },
+          { lat: 3, lng: 2, height: 4 },
+        ],
+        strokeColor: "red",
+      },
+    },
+  });
+});
+
+test("polygon", () => {
+  expect(
+    getCompat({
+      id: "xxx",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [1, 2, 3],
+                [2, 3, 4],
+              ],
+            ],
+          },
+        },
+      },
+      polygon: {
+        fillColor: "red",
+      },
+      compat: {
+        propertyId: "p",
+      },
+    } as any),
+  ).toEqual({
+    extensionId: "polygon",
+    propertyId: "p",
+    property: {
+      default: {
+        polygon: [
+          [
+            { lat: 2, lng: 1, height: 3 },
+            { lat: 3, lng: 2, height: 4 },
+          ],
+        ],
+        fillColor: "red",
+      },
+    },
+  });
+});
+
+test("photooverlay", () => {
+  expect(
+    getCompat({
+      id: "xxx",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [1, 2, 3],
+          },
+        },
+      },
+      photooverlay: {
+        imageSize: 1,
+      },
+      compat: {
+        propertyId: "p",
+      },
+    }),
+  ).toEqual({
+    extensionId: "photooverlay",
+    propertyId: "p",
+    property: {
+      default: {
+        location: { lat: 2, lng: 1 },
+        height: 3,
+        imageSize: 1,
+      },
+    },
+  });
+});
+
+test("ellipsoid", () => {
+  expect(
+    getCompat({
+      id: "xxx",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [1, 2, 3],
+          },
+        },
+      },
+      ellipsoid: {
+        radii: 100,
+      },
+      compat: {
+        propertyId: "p",
+      },
+    } as any),
+  ).toEqual({
+    extensionId: "ellipsoid",
+    propertyId: "p",
+    property: {
+      default: {
+        position: { lat: 2, lng: 1 },
+        height: 3,
+        radii: 100,
+      },
+    },
+  });
+});
+
+test("model", () => {
+  expect(
+    getCompat({
+      id: "xxx",
+      type: "simple",
+      data: {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [1, 2, 3],
+          },
+        },
+      },
+      model: {
+        model: "xxx",
+        color: "red",
+      },
+      compat: {
+        propertyId: "p",
+      },
+    } as any),
+  ).toEqual({
+    extensionId: "model",
+    propertyId: "p",
+    property: {
+      default: {
+        location: { lat: 2, lng: 1 },
+        height: 3,
+        model: "xxx",
+      },
+      appearance: {
+        color: "red",
+      },
+    },
+  });
+});
+
+test("3dtiles", () => {
+  expect(
+    getCompat({
+      id: "xxx",
+      type: "simple",
+      data: {
+        type: "3dtiles",
+        url: "xxx",
+      },
+      "3dtiles": {
+        aaaa: 1,
+      },
+      compat: {
+        propertyId: "p",
+      },
+    } as any),
+  ).toEqual({
+    extensionId: "tileset",
+    propertyId: "p",
+    property: {
+      default: {
+        tileset: "xxx",
+        aaaa: 1,
+      },
+    },
+  });
+});
+
+test("resource", () => {
+  expect(
+    getCompat({
+      id: "xxx",
+      type: "simple",
+      resource: {
+        url: "xxx",
+        aaaa: 1,
+      },
+      compat: {
+        propertyId: "p",
+      },
+    } as any),
+  ).toEqual({
+    extensionId: "resource",
+    propertyId: "p",
+    property: {
+      default: {
+        url: "xxx",
+        aaaa: 1,
+      },
+    },
+  });
+});
diff --git a/web/src/beta/core/mantle/compat/backward.ts b/web/src/beta/core/mantle/compat/backward.ts
new file mode 100644
index 0000000000..9b48a59915
--- /dev/null
+++ b/web/src/beta/core/mantle/compat/backward.ts
@@ -0,0 +1,189 @@
+import type { GeoJSON } from "geojson";
+import { omit, omitBy, pick } from "lodash-es";
+
+import type { Layer, LayerCompat } from "../types";
+import { getCoord, getCoords, getGeom } from "../utils";
+
+import type { LegacyLayer } from ".";
+
+export function convertLayer(l: Layer): LegacyLayer | undefined {
+  return convertLayerGroup(l) ?? convertLayerItem(l);
+}
+
+function convertLayerCommon(l: Layer): any {
+  return omitBy(
+    {
+      id: l.id,
+      isVisible: l.visible,
+      title: l.title,
+      creator: l.creator,
+      infobox: l.infobox,
+      tags: l.tags,
+      property: l.compat?.property,
+      propertyId: l.compat?.propertyId,
+      pluginId: l.compat?.extensionId ? "reearth" : undefined,
+      extensionId: l.compat?.extensionId,
+    },
+    v => typeof v === "undefined" || v === null,
+  );
+}
+
+function convertLayerGroup(l: Layer): LegacyLayer | undefined {
+  if (l.type !== "group") return;
+
+  return {
+    ...convertLayerCommon(l),
+    children: l.children?.map(convertLayer).filter((l): l is LegacyLayer => !!l) ?? [],
+  };
+}
+
+function convertLayerItem(l: Layer): LegacyLayer | undefined {
+  if (l.type !== "simple") return;
+
+  return convertLayerCommon(l);
+}
+
+export function getCompat(l: Layer | undefined): LayerCompat | undefined {
+  if (!l || typeof l !== "object" || l.type !== "simple") return;
+
+  const data: GeoJSON | undefined = l.data?.type === "geojson" ? l.data.value : undefined;
+
+  let property: any;
+  let extensionId: string | undefined;
+
+  if ("marker" in l) {
+    const coord = getCoord(data);
+    extensionId = "marker";
+    property = {
+      default: {
+        ...l.marker,
+        ...(coord && coord.length >= 2
+          ? {
+              location: { lng: coord[0], lat: coord[1] },
+              height: coord[2],
+            }
+          : {}),
+      },
+    };
+  } else if ("polyline" in l) {
+    const coords = getCoords(data);
+    extensionId = "polyline";
+    property = {
+      default: {
+        ...(l as any).polyline,
+        ...(coords
+          ? {
+              coordinates: coords.map(c => ({ lng: c[0], lat: c[1], height: c[2] })),
+            }
+          : {}),
+      },
+    };
+  } else if ("polygon" in l) {
+    // rect is also included in polygon
+    const geo = getGeom(data);
+    extensionId = "polygon";
+    property = {
+      default: {
+        ...(l as any).polygon,
+        ...(geo?.type === "Polygon"
+          ? {
+              polygon: geo.coordinates.map(coords =>
+                coords.map(c => ({ lng: c[0], lat: c[1], height: c[2] })),
+              ),
+            }
+          : {}),
+      },
+    };
+  } else if ("photooverlay" in l) {
+    const coord = getCoord(data);
+    extensionId = "photooverlay";
+    property = {
+      default: {
+        ...(l as any).photooverlay,
+        ...(coord && coord.length >= 2
+          ? {
+              location: { lng: coord[0], lat: coord[1] },
+              height: coord[2],
+            }
+          : {}),
+      },
+    };
+  } else if ("ellipsoid" in l) {
+    const coord = getCoord(data);
+    extensionId = "ellipsoid";
+    property = {
+      default: {
+        ...(l as any).ellipsoid,
+        ...(coord && coord.length >= 2
+          ? {
+              position: { lng: coord[0], lat: coord[1] },
+              height: coord[2],
+            }
+          : {}),
+      },
+    };
+  } else if ("model" in l) {
+    const appearanceKeys = [
+      "shadows",
+      "colorBlend",
+      "color",
+      "colorBlendAmount",
+      "lightColor",
+      "silhouette",
+      "silhouetteColor",
+      "silhouetteSize",
+    ];
+    const m = omit((l as any).model, ...appearanceKeys);
+    const a = omitBy(
+      pick((l as any).model, ...appearanceKeys),
+      v => typeof v === "undefined" || v === null,
+    );
+    const coord = getCoord(data);
+    extensionId = "model";
+    property = {
+      default: {
+        ...m,
+        ...(coord && coord.length >= 2
+          ? {
+              location: { lng: coord[0], lat: coord[1] },
+              height: coord[2],
+            }
+          : {}),
+      },
+      ...(Object.keys(a).length
+        ? {
+            appearance: a,
+          }
+        : {}),
+    };
+  } else if ("3dtiles" in l) {
+    extensionId = "tileset";
+    property = {
+      default: {
+        ...(l as any)["3dtiles"],
+        ...((l as any).data?.type === "3dtiles" && (l as any).data.url
+          ? {
+              tileset: (l as any).data.url,
+            }
+          : {}),
+      },
+    };
+  } else if ("resource" in l) {
+    extensionId = "resource";
+    property = {
+      default: {
+        ...(l as any).resource,
+      },
+    };
+  }
+
+  return {
+    extensionId,
+    property,
+    ...(l.compat?.propertyId
+      ? {
+          propertyId: l.compat?.propertyId,
+        }
+      : {}),
+  };
+}
diff --git a/web/src/beta/core/mantle/compat/forward.test.ts b/web/src/beta/core/mantle/compat/forward.test.ts
new file mode 100644
index 0000000000..639a6b3f4f
--- /dev/null
+++ b/web/src/beta/core/mantle/compat/forward.test.ts
@@ -0,0 +1,686 @@
+import { expect, test } from "vitest";
+
+import { convertLegacyCluster, convertLegacyLayer } from "./forward";
+import type { Infobox, LegacyCluster, Tag } from "./types";
+
+const infobox: Infobox = { blocks: [], property: { default: { bgcolor: "red" } } };
+const tags: Tag[] = [{ id: "x", label: "x" }];
+
+test("group", () => {
+  expect(
+    convertLegacyLayer({
+      id: "xxx",
+      isVisible: true,
+      title: "title",
+      creator: "aaa",
+      infobox,
+      tags,
+      extensionId: "a",
+      propertyId: "p",
+      property: { a: 1 },
+      children: [
+        {
+          id: "yyy",
+          type: "group",
+          children: [],
+        },
+      ],
+    }),
+  ).toEqual({
+    id: "xxx",
+    type: "group",
+    title: "title",
+    visible: true,
+    compat: {
+      property: { a: 1 },
+      extensionId: "a",
+      propertyId: "p",
+    },
+    infobox,
+    tags,
+    creator: "aaa",
+    children: [
+      {
+        id: "yyy",
+        type: "group",
+        children: [],
+      },
+    ],
+  });
+});
+
+test("marker", () => {
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "marker",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          location: { lat: 1, lng: 2 },
+          height: 3,
+          pointColor: "red",
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    data: {
+      type: "geojson",
+      value: {
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [2, 1, 3],
+        },
+      },
+    },
+    visible: true,
+    marker: {
+      pointColor: "red",
+    },
+    compat: {
+      extensionId: "marker",
+      propertyId: "p",
+      property: {
+        default: {
+          location: { lat: 1, lng: 2 },
+          height: 3,
+          pointColor: "red",
+        },
+      },
+    },
+  });
+});
+
+test("polyline", () => {
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "polyline",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          coordinates: [
+            { lat: 1, lng: 2, height: 3 },
+            { lat: 2, lng: 3, height: 4 },
+          ],
+          strokeColor: "red",
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    data: {
+      type: "geojson",
+      value: {
+        type: "Feature",
+        geometry: {
+          type: "LineString",
+          coordinates: [
+            [2, 1, 3],
+            [3, 2, 4],
+          ],
+        },
+      },
+    },
+    visible: true,
+    polyline: {
+      strokeColor: "red",
+    },
+    compat: {
+      extensionId: "polyline",
+      propertyId: "p",
+      property: {
+        default: {
+          coordinates: [
+            { lat: 1, lng: 2, height: 3 },
+            { lat: 2, lng: 3, height: 4 },
+          ],
+          strokeColor: "red",
+        },
+      },
+    },
+  });
+});
+
+test("polygon", () => {
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "polygon",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          polygon: [
+            [
+              { lat: 1, lng: 2, height: 3 },
+              { lat: 2, lng: 3, height: 4 },
+            ],
+          ],
+          strokeColor: "red",
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    data: {
+      type: "geojson",
+      value: {
+        type: "Feature",
+        geometry: {
+          type: "Polygon",
+          coordinates: [
+            [
+              [2, 1, 3],
+              [3, 2, 4],
+            ],
+          ],
+        },
+      },
+    },
+    visible: true,
+    polygon: {
+      strokeColor: "red",
+    },
+    compat: {
+      extensionId: "polygon",
+      propertyId: "p",
+      property: {
+        default: {
+          polygon: [
+            [
+              { lat: 1, lng: 2, height: 3 },
+              { lat: 2, lng: 3, height: 4 },
+            ],
+          ],
+          strokeColor: "red",
+        },
+      },
+    },
+  });
+});
+
+test("rect", () => {
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "rect",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          rect: {
+            north: 1,
+            east: 2,
+            south: 3,
+            west: 4,
+          },
+          height: 3,
+          strokeColor: "red",
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    data: {
+      type: "geojson",
+      value: {
+        type: "Feature",
+        geometry: {
+          type: "Polygon",
+          coordinates: [
+            [
+              [4, 1, 3],
+              [2, 1, 3],
+              [2, 3, 3],
+              [4, 3, 3],
+              [4, 1, 3],
+            ],
+          ],
+        },
+      },
+    },
+    visible: true,
+    polygon: {
+      strokeColor: "red",
+    },
+    compat: {
+      extensionId: "rect",
+      propertyId: "p",
+      property: {
+        default: {
+          rect: {
+            north: 1,
+            east: 2,
+            south: 3,
+            west: 4,
+          },
+          height: 3,
+          strokeColor: "red",
+        },
+      },
+    },
+  });
+});
+
+test("photooverlay", () => {
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "photooverlay",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          location: { lat: 1, lng: 2 },
+          height: 3,
+          hoge: "red",
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    visible: true,
+    data: {
+      type: "geojson",
+      value: {
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [2, 1, 3],
+        },
+      },
+    },
+    photooverlay: {
+      hoge: "red",
+    },
+    compat: {
+      extensionId: "photooverlay",
+      propertyId: "p",
+      property: {
+        default: {
+          location: { lat: 1, lng: 2 },
+          height: 3,
+          hoge: "red",
+        },
+      },
+    },
+  });
+});
+
+test("ellipsoid", () => {
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "ellipsoid",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          position: { lat: 1, lng: 2 },
+          height: 3,
+          radii: 100,
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    data: {
+      type: "geojson",
+      value: {
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [2, 1, 3],
+        },
+      },
+    },
+    visible: true,
+    ellipsoid: {
+      radii: 100,
+    },
+    compat: {
+      extensionId: "ellipsoid",
+      propertyId: "p",
+      property: {
+        default: {
+          position: { lat: 1, lng: 2 },
+          height: 3,
+          radii: 100,
+        },
+      },
+    },
+  });
+});
+
+test("model", () => {
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "model",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          model: "xxx",
+          location: { lat: 1, lng: 2 },
+          height: 3,
+        },
+        appearance: {
+          aaa: 1,
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    visible: true,
+    data: {
+      type: "geojson",
+      value: {
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [2, 1, 3],
+        },
+      },
+    },
+    model: {
+      model: "xxx",
+      aaa: 1,
+    },
+    compat: {
+      extensionId: "model",
+      propertyId: "p",
+      property: {
+        default: {
+          model: "xxx",
+          location: { lat: 1, lng: 2 },
+          height: 3,
+        },
+        appearance: {
+          aaa: 1,
+        },
+      },
+    },
+  });
+});
+
+test("3dtiles", () => {
+  // osm
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "tileset",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          sourceType: "osm",
+          hoge: "red",
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    visible: true,
+    data: {
+      type: "osm-buildings",
+    },
+    "3dtiles": {
+      hoge: "red",
+    },
+    compat: {
+      extensionId: "tileset",
+      propertyId: "p",
+      property: {
+        default: {
+          sourceType: "osm",
+          hoge: "red",
+        },
+      },
+    },
+  });
+
+  // tileset
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "tileset",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          tileset: "xxx",
+          hoge: "red",
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    visible: true,
+    data: {
+      type: "3dtiles",
+      url: "xxx",
+    },
+    "3dtiles": {
+      hoge: "red",
+    },
+    compat: {
+      extensionId: "tileset",
+      propertyId: "p",
+      property: {
+        default: {
+          tileset: "xxx",
+          hoge: "red",
+        },
+      },
+    },
+  });
+});
+
+test("resource", () => {
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "resource",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          type: "abc",
+          url: "xxx",
+          hoge: "red",
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    visible: true,
+    data: {
+      type: "abc",
+      url: "xxx",
+    },
+    resource: {
+      type: "abc",
+      url: "xxx",
+      hoge: "red",
+    },
+    compat: {
+      extensionId: "resource",
+      propertyId: "p",
+      property: {
+        default: {
+          type: "abc",
+          url: "xxx",
+          hoge: "red",
+        },
+      },
+    },
+  });
+
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "resource",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          url: {
+            type: "Feature",
+            geometry: {
+              type: "LineString",
+              coordinates: [
+                [2, 1, 3],
+                [3, 2, 4],
+              ],
+            },
+          },
+          type: "geojson",
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    visible: true,
+    resource: {
+      url: {
+        type: "Feature",
+        geometry: {
+          type: "LineString",
+          coordinates: [
+            [2, 1, 3],
+            [3, 2, 4],
+          ],
+        },
+      },
+      type: "geojson",
+    },
+    data: {
+      value: {
+        type: "Feature",
+        geometry: {
+          type: "LineString",
+          coordinates: [
+            [2, 1, 3],
+            [3, 2, 4],
+          ],
+        },
+      },
+      type: "geojson",
+    },
+    compat: {
+      extensionId: "resource",
+      propertyId: "p",
+      property: {
+        default: {
+          url: {
+            type: "Feature",
+            geometry: {
+              type: "LineString",
+              coordinates: [
+                [2, 1, 3],
+                [3, 2, 4],
+              ],
+            },
+          },
+          type: "geojson",
+        },
+      },
+    },
+  });
+});
+
+test("box", () => {
+  expect(
+    convertLegacyLayer({
+      id: "x",
+      extensionId: "box",
+      propertyId: "p",
+      isVisible: true,
+      property: {
+        default: {
+          color: "red",
+          location: {
+            lng: 1,
+            lat: 2,
+            height: 3,
+          },
+        },
+      },
+    }),
+  ).toEqual({
+    id: "x",
+    type: "simple",
+    visible: true,
+    box: {
+      color: "red",
+    },
+    data: {
+      type: "geojson",
+      value: {
+        type: "Feature",
+        geometry: {
+          type: "Point",
+          coordinates: [1, 2, 3],
+        },
+      },
+    },
+    compat: {
+      extensionId: "box",
+      propertyId: "p",
+      property: {
+        default: {
+          color: "red",
+          location: {
+            lng: 1,
+            lat: 2,
+            height: 3,
+          },
+        },
+      },
+    },
+  });
+});
+
+test("convertLegacyCluster", () => {
+  const legacy: LegacyCluster[] = [
+    {
+      id: "test",
+      default: {
+        clusterPixelRange: 100,
+        clusterMinSize: 1,
+      },
+      layers: [{ layer: "1" }, {}],
+    },
+  ];
+
+  expect(convertLegacyCluster(legacy)).toEqual([
+    {
+      id: "test",
+      property: {
+        default: {
+          clusterPixelRange: 100,
+          clusterMinSize: 1,
+        },
+        layers: [{ layer: "1" }, {}],
+      },
+      layers: ["1"],
+    },
+  ]);
+});
diff --git a/web/src/beta/core/mantle/compat/forward.ts b/web/src/beta/core/mantle/compat/forward.ts
new file mode 100644
index 0000000000..4929241ceb
--- /dev/null
+++ b/web/src/beta/core/mantle/compat/forward.ts
@@ -0,0 +1,273 @@
+import { Feature, LineString, Point, Polygon } from "geojson";
+import { omitBy } from "lodash-es";
+
+import { Cluster } from "@reearth/beta/core/Map";
+
+import type { Data, Layer, LayerGroup, LayerSimple } from "../types";
+
+import { LegacyCluster } from "./types";
+
+import type { LegacyLayer } from ".";
+
+export function convertLegacyLayer(l: LegacyLayer | undefined): Layer | undefined {
+  return l ? convertLegacyLayerGroup(l) ?? convertLegacyLayerItem(l) : undefined;
+}
+
+function convertLegacyLayerCommon(l: LegacyLayer): any {
+  const compat = omitBy(
+    {
+      extensionId: l.extensionId,
+      property: l.property,
+      propertyId: l.propertyId,
+    },
+    v => typeof v === "undefined" || v === null,
+  );
+
+  return omitBy(
+    {
+      id: l.id,
+      title: l.title,
+      visible: l.isVisible,
+      creator: l.creator,
+      infobox: l.infobox,
+      tags: l.tags,
+      ...(Object.keys(compat).length ? { compat } : {}),
+    },
+    v => typeof v === "undefined" || v === null,
+  );
+}
+
+function convertLegacyLayerGroup(l: LegacyLayer): LayerGroup | undefined {
+  if (!Array.isArray(l.children)) return;
+
+  return {
+    type: "group",
+    ...convertLegacyLayerCommon(l),
+    children: l.children?.map(convertLegacyLayer).filter((l): l is Layer => !!l) ?? [],
+  };
+}
+
+function convertLegacyLayerItem(l: LegacyLayer): LayerSimple | undefined {
+  if (Array.isArray(l.children)) return;
+
+  let appearance: string | undefined;
+  let data: Data | undefined;
+  let legacyPropertyKeys: string[] | undefined;
+
+  if (l.extensionId === "marker") {
+    appearance = "marker";
+    legacyPropertyKeys = ["location", "height"];
+    if (l.property?.default?.location) {
+      data = {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [
+              l.property.default.location.lng,
+              l.property.default.location.lat,
+              ...(l.property.default.height ? [l.property.default.height] : []),
+            ],
+          },
+        } as Feature<Point>,
+      };
+    }
+  } else if (l.extensionId === "polyline") {
+    appearance = "polyline";
+    legacyPropertyKeys = ["coordinates"];
+    if (l.property?.default?.coordinates) {
+      data = {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "LineString",
+            coordinates: l.property.default.coordinates.map((c: any) => [c.lng, c.lat, c.height]),
+          },
+        } as Feature<LineString>,
+      };
+    }
+  } else if (l.extensionId === "polygon") {
+    appearance = "polygon";
+    legacyPropertyKeys = ["polygon"];
+    if (l.property?.default?.polygon) {
+      data = {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Polygon",
+            coordinates: l.property.default.polygon.map((p: any) =>
+              p.map((c: any) => [c.lng, c.lat, c.height]),
+            ),
+          },
+        } as Feature<Polygon>,
+      };
+    }
+  } else if (l.extensionId === "rect") {
+    appearance = "polygon";
+    legacyPropertyKeys = ["rect", "height"];
+    if (l.property?.default?.rect) {
+      const r = l.property?.default?.rect;
+      const h = l.property.default.height;
+      data = {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Polygon",
+            coordinates: [
+              [
+                [r.west, r.north, h],
+                [r.east, r.north, h],
+                [r.east, r.south, h],
+                [r.west, r.south, h],
+                [r.west, r.north, h],
+              ],
+            ],
+          },
+        } as Feature<Polygon>,
+      };
+    }
+  } else if (l.extensionId === "photooverlay") {
+    appearance = "photooverlay";
+    legacyPropertyKeys = ["location", "height"];
+    if (l.property?.default?.location) {
+      data = {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [
+              l.property.default.location.lng,
+              l.property.default.location.lat,
+              ...(l.property.default.height ? [l.property.default.height] : []),
+            ],
+          },
+        } as Feature<Point>,
+      };
+    }
+  } else if (l.extensionId === "ellipsoid") {
+    appearance = "ellipsoid";
+    legacyPropertyKeys = ["position", "height"];
+    if (l.property?.default?.position) {
+      data = {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [
+              l.property.default.position.lng,
+              l.property.default.position.lat,
+              ...(typeof l.property.default.height === "number" ? [l.property.default.height] : []),
+            ],
+          },
+        } as Feature<Point>,
+      };
+    }
+  } else if (l.extensionId === "model") {
+    appearance = "model";
+    legacyPropertyKeys = ["location", "height"];
+    if (l.property?.default?.location) {
+      data = {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [
+              l.property.default.location.lng,
+              l.property.default.location.lat,
+              ...(typeof l.property.default.height === "number" ? [l.property.default.height] : []),
+            ],
+          },
+        } as Feature<Point>,
+      };
+    }
+  } else if (l.extensionId === "tileset") {
+    appearance = "3dtiles";
+    legacyPropertyKeys = ["tileset", "sourceType"];
+    if (l.property?.default?.sourceType === "osm") {
+      data = {
+        type: "osm-buildings",
+      };
+    } else if (l.property?.default?.tileset) {
+      data = {
+        type: "3dtiles",
+        url: l.property.default.tileset,
+      };
+    }
+  } else if (l.extensionId === "resource") {
+    appearance = "resource";
+    // For compat
+    if (l.property?.default?.url && typeof l.property.default.url === "object") {
+      const obj = l.property.default.url;
+      data = {
+        type: l.property.default.type,
+        value: obj,
+      };
+    } else {
+      data = {
+        type: l.property?.default?.type || "auto", // auto is allowed only in internal
+        url: l.property?.default?.url,
+      };
+    }
+  } else if (l.extensionId === "box") {
+    appearance = "box";
+    legacyPropertyKeys = ["location", "height"];
+    if (l.property?.default?.location) {
+      data = {
+        type: "geojson",
+        value: {
+          type: "Feature",
+          geometry: {
+            type: "Point",
+            coordinates: [
+              l.property.default.location.lng,
+              l.property.default.location.lat,
+              ...(typeof l.property.default.location.height === "number"
+                ? [l.property.default.location.height]
+                : []),
+            ],
+          },
+        } as Feature<Point>,
+      };
+    }
+  }
+
+  const property =
+    appearance && l.property
+      ? Object.fromEntries(
+          Object.entries(l.property)
+            .flatMap(([k, v]): (readonly [PropertyKey, any])[] | undefined => {
+              if (Array.isArray(v) || k === "id" || !v || typeof v !== "object") return undefined;
+              return Object.entries(v).filter(([k]) => !legacyPropertyKeys?.includes(k));
+            })
+            .filter((p): p is readonly [PropertyKey, any] => !!p),
+        )
+      : undefined;
+
+  return omitBy(
+    {
+      type: "simple",
+      ...convertLegacyLayerCommon(l),
+      data,
+      ...(appearance && property ? { [appearance]: property } : {}),
+    },
+    v => typeof v === "undefined" || v === null,
+  ) as any;
+}
+
+export function convertLegacyCluster(clusters: LegacyCluster[]): Cluster[] {
+  return clusters.map(c => ({
+    id: c.id,
+    property: {
+      default: c.default,
+      layers: c.layers,
+    },
+    layers: c.layers?.map(l => l.layer).filter((l): l is string => !!l),
+  }));
+}
diff --git a/web/src/beta/core/mantle/compat/index.ts b/web/src/beta/core/mantle/compat/index.ts
new file mode 100644
index 0000000000..122069b061
--- /dev/null
+++ b/web/src/beta/core/mantle/compat/index.ts
@@ -0,0 +1,4 @@
+export { convertLayer, getCompat } from "./backward";
+export { convertLegacyLayer, convertLegacyCluster } from "./forward";
+
+export type { LegacyLayer, Tag, CameraPosition, LegacyCluster } from "./types";
diff --git a/web/src/beta/core/mantle/compat/types.ts b/web/src/beta/core/mantle/compat/types.ts
new file mode 100644
index 0000000000..d369449b0b
--- /dev/null
+++ b/web/src/beta/core/mantle/compat/types.ts
@@ -0,0 +1,104 @@
+export type LegacyLayer<P = any, IBP = any> = {
+  id: string;
+  type?: string;
+  pluginId?: string;
+  extensionId?: string;
+  title?: string;
+  property?: P;
+  infobox?: Infobox<IBP>;
+  isVisible?: boolean;
+  propertyId?: string;
+  tags?: Tag[];
+  readonly children?: LegacyLayer[];
+  creator?: string;
+};
+
+export type Tag = {
+  id: string;
+  label: string;
+  tags?: Tag[];
+};
+
+export type Infobox<BP = any> = {
+  property?: InfoboxProperty;
+  blocks?: Block<BP>[];
+};
+
+export type InfoboxProperty = {
+  default?: {
+    showTitle?: boolean;
+    title?: string;
+    height?: number;
+    heightType?: "auto" | "manual";
+    infoboxPaddingTop?: number;
+    infoboxPaddingBottom?: number;
+    infoboxPaddingLeft?: number;
+    infoboxPaddingRight?: number;
+    size?: "small" | "medium" | "large";
+    position?: "right" | "middle" | "left";
+    typography?: Typography;
+    bgcolor?: string;
+    outlineColor?: string;
+    outlineWidth?: number;
+    useMask?: boolean;
+    defaultContent?: "description" | "attributes";
+    unselectOnClose?: boolean;
+  };
+};
+
+export type Block<P = any> = {
+  id: string;
+  pluginId?: string;
+  extensionId?: string;
+  property?: P;
+  propertyId?: string;
+};
+
+export type Rect = {
+  north: number;
+  south: number;
+  east: number;
+  west: number;
+};
+
+/** Represents the camera position and state */
+export type CameraPosition = {
+  /** degrees */
+  lat: number;
+  /** degrees */
+  lng: number;
+  /** meters */
+  height: number;
+  /** radians */
+  heading: number;
+  /** radians */
+  pitch: number;
+  /** radians */
+  roll: number;
+  /** Field of view expressed in radians */
+  fov: number;
+};
+
+export type Typography = {
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: number;
+  color?: string;
+  textAlign?: "left" | "center" | "right" | "justify" | "justify_all";
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+};
+
+export type LegacyCluster = {
+  id: string;
+  default?: {
+    clusterPixelRange: number;
+    clusterMinSize: number;
+    clusterLabelTypography?: Typography;
+    clusterImage?: string;
+    clusterImageHeight?: number;
+    clusterImageWidth?: number;
+  };
+  layers?: { layer?: string }[];
+};
diff --git a/web/src/beta/core/mantle/data/csv.test.ts b/web/src/beta/core/mantle/data/csv.test.ts
new file mode 100644
index 0000000000..4fb6ac53d8
--- /dev/null
+++ b/web/src/beta/core/mantle/data/csv.test.ts
@@ -0,0 +1,478 @@
+import { expect, test, vi } from "vitest";
+
+import { fetchCSV } from "./csv";
+import * as Utils from "./utils";
+
+test("with header", async () => {
+  const fetchDataMock = vi.spyOn(Utils, "f");
+  fetchDataMock.mockImplementation(async () => {
+    return {
+      text: async () => `id,country,lng,,lat,height
+1,Japan,0,,1,10
+2,US,2,,3,
+3,UK,4,,5,30
+`,
+    } as Response;
+  });
+
+  const features = await fetchCSV({
+    type: "csv",
+    url: "http://example.com",
+    csv: {
+      idColumn: "id",
+      latColumn: "lat",
+      lngColumn: "lng",
+      heightColumn: "height",
+      noHeader: false,
+    },
+  });
+
+  expect(features).toEqual([
+    {
+      type: "feature",
+      id: "1",
+      geometry: {
+        type: "Point",
+        coordinates: [0, 1, 10],
+      },
+      properties: {
+        country: "Japan",
+      },
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "2",
+      geometry: {
+        type: "Point",
+        coordinates: [2, 3],
+      },
+      properties: {
+        country: "US",
+      },
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "3",
+      geometry: {
+        type: "Point",
+        coordinates: [4, 5, 30],
+      },
+      properties: {
+        country: "UK",
+      },
+      range: undefined,
+    },
+  ]);
+});
+
+test("specify csv directly", async () => {
+  const features = await fetchCSV({
+    type: "csv",
+    value: `id,lng,lat,height,country\n1,0,0,0,Japan`,
+    csv: {
+      idColumn: "id",
+      latColumn: "lat",
+      lngColumn: "lng",
+      heightColumn: "height",
+      noHeader: false,
+    },
+  });
+
+  expect(features).toEqual([
+    {
+      type: "feature",
+      id: "1",
+      geometry: {
+        type: "Point",
+        coordinates: [0, 0, 0],
+      },
+      properties: {
+        country: "Japan",
+      },
+      range: undefined,
+    },
+  ]);
+});
+
+test("has header but set index", async () => {
+  const fetchDataMock = vi.spyOn(Utils, "f");
+  fetchDataMock.mockImplementation(async () => {
+    return {
+      // lat has no header name
+      text: async () => `id,country,,,lat
+1,Japan,0,,1
+2,US,2,,3
+3,UK,4,,5
+`,
+    } as Response;
+  });
+
+  const features = await fetchCSV({
+    type: "csv",
+    url: "http://example.com",
+    csv: {
+      idColumn: 0,
+      lngColumn: 2,
+      latColumn: 100, // This should not found
+      noHeader: false,
+    },
+  });
+
+  expect(features).toEqual([
+    {
+      type: "feature",
+      id: "1",
+      geometry: undefined,
+      properties: {
+        country: "Japan",
+        lat: 1,
+      },
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "2",
+      geometry: undefined,
+      properties: {
+        country: "US",
+        lat: 3,
+      },
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "3",
+      geometry: undefined,
+      properties: {
+        country: "UK",
+        lat: 5,
+      },
+      range: undefined,
+    },
+  ]);
+});
+
+test("has multiline field", async () => {
+  const fetchDataMock = vi.spyOn(Utils, "f");
+  fetchDataMock.mockImplementation(async () => {
+    return {
+      // lat has no header name
+      text: async () => `id,country,lng,text,lat
+1,Japan,0,"Hello
+World",1
+2,US,2,"This is list
+- a
+- b
+- c
+",3
+3,UK,4,"Hey,
+I'm CSV",5
+`,
+    } as Response;
+  });
+
+  const features = await fetchCSV({
+    type: "csv",
+    url: "http://example.com",
+    csv: {
+      idColumn: 0,
+      lngColumn: 2,
+      latColumn: 4, // This should not fount.
+      noHeader: false,
+    },
+  });
+
+  expect(features).toEqual([
+    {
+      type: "feature",
+      id: "1",
+      geometry: {
+        type: "Point",
+        coordinates: [0, 1],
+      },
+      properties: {
+        country: "Japan",
+        text: `Hello
+World`,
+      },
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "2",
+      geometry: {
+        type: "Point",
+        coordinates: [2, 3],
+      },
+      properties: {
+        country: "US",
+        text: `This is list
+- a
+- b
+- c
+`,
+      },
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "3",
+      geometry: {
+        type: "Point",
+        coordinates: [4, 5],
+      },
+      properties: {
+        country: "UK",
+        text: `Hey,
+I'm CSV`,
+      },
+      range: undefined,
+    },
+  ]);
+});
+
+test("without header", async () => {
+  const fetchDataMock = vi.spyOn(Utils, "f");
+  fetchDataMock.mockImplementation(async () => {
+    return {
+      text: async () => `1,Japan,0,,1
+2,US,2,,3
+3,UK,4,,5
+`,
+    } as Response;
+  });
+
+  const features = await fetchCSV({
+    type: "csv",
+    url: "http://example.com",
+    csv: {
+      idColumn: 0,
+      lngColumn: 2,
+      latColumn: 4,
+      noHeader: true,
+    },
+  });
+
+  expect(features).toEqual([
+    {
+      type: "feature",
+      id: "1",
+      geometry: {
+        type: "Point",
+        coordinates: [0, 1],
+      },
+      properties: {},
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "2",
+      geometry: {
+        type: "Point",
+        coordinates: [2, 3],
+      },
+      properties: {},
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "3",
+      geometry: {
+        type: "Point",
+        coordinates: [4, 5],
+      },
+      properties: {},
+      range: undefined,
+    },
+  ]);
+});
+
+test("some delimiter", async () => {
+  const fetchDataMock = vi.spyOn(Utils, "f");
+  fetchDataMock.mockImplementation(async () => {
+    return {
+      text: async () => `1,Japan,0,,1
+2;US;2;;3
+3\tUK\t4\t\t5
+`,
+    } as Response;
+  });
+
+  const features = await fetchCSV({
+    type: "csv",
+    url: "http://example.com",
+    csv: {
+      idColumn: 0,
+      lngColumn: 2,
+      latColumn: 4,
+      noHeader: true,
+    },
+  });
+
+  expect(features).toEqual([
+    {
+      type: "feature",
+      id: "1",
+      geometry: {
+        type: "Point",
+        coordinates: [0, 1],
+      },
+      properties: {},
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "2",
+      geometry: {
+        type: "Point",
+        coordinates: [2, 3],
+      },
+      properties: {},
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "3",
+      geometry: {
+        type: "Point",
+        coordinates: [4, 5],
+      },
+      properties: {},
+      range: undefined,
+    },
+  ]);
+});
+
+test("invalid parameters", async () => {
+  const fetchDataMock = vi.spyOn(Utils, "f");
+  const generateRandomStringMock = vi.spyOn(Utils, "generateRandomString");
+  fetchDataMock.mockImplementation(async () => {
+    return {
+      text: async () => `id,lng,lat,height
+1,abc,1,10
+,2,,20
+3,,,30
+4,100,100,abc
+5,200,200,50
+`,
+    } as Response;
+  });
+  generateRandomStringMock.mockImplementation(() => "random");
+
+  const features = await fetchCSV({
+    type: "csv",
+    url: "http://example.com",
+    csv: {
+      idColumn: "id",
+      latColumn: "lat",
+      lngColumn: "lng",
+      heightColumn: "height",
+      noHeader: false,
+    },
+  });
+
+  expect(features).toEqual([
+    {
+      type: "feature",
+      id: "1",
+      geometry: undefined,
+      properties: {},
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "random",
+      geometry: undefined,
+      properties: {},
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "3",
+      geometry: undefined,
+      properties: {},
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "4",
+      geometry: {
+        type: "Point",
+        coordinates: [100, 100],
+      },
+      properties: {},
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "5",
+      geometry: {
+        type: "Point",
+        coordinates: [200, 200, 50],
+      },
+      properties: {},
+      range: undefined,
+    },
+  ]);
+});
+
+test("has header but set index with disableTypeConversion", async () => {
+  const fetchDataMock = vi.spyOn(Utils, "f");
+  fetchDataMock.mockImplementation(async () => {
+    return {
+      // lat has no header name
+      text: async () => `id,country,,,lat
+1,Japan,0,,1
+2,US,2,,3
+3,UK,4,,5
+`,
+    } as Response;
+  });
+
+  const features = await fetchCSV({
+    type: "csv",
+    url: "http://example.com",
+    csv: {
+      idColumn: 0,
+      lngColumn: 2,
+      latColumn: 100, // This should not found
+      noHeader: false,
+      disableTypeConversion: true,
+    },
+  });
+
+  expect(features).toEqual([
+    {
+      type: "feature",
+      id: "1",
+      geometry: undefined,
+      properties: {
+        country: "Japan",
+        lat: "1",
+      },
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "2",
+      geometry: undefined,
+      properties: {
+        country: "US",
+        lat: "3",
+      },
+      range: undefined,
+    },
+    {
+      type: "feature",
+      id: "3",
+      geometry: undefined,
+      properties: {
+        country: "UK",
+        lat: "5",
+      },
+      range: undefined,
+    },
+  ]);
+});
diff --git a/web/src/beta/core/mantle/data/csv.ts b/web/src/beta/core/mantle/data/csv.ts
new file mode 100644
index 0000000000..6bba510bbf
--- /dev/null
+++ b/web/src/beta/core/mantle/data/csv.ts
@@ -0,0 +1,194 @@
+import type { Feature as GeoJSONFeature, Point } from "geojson";
+
+import type { Data, DataRange, Feature } from "../types";
+
+import { f, FetchOptions, generateRandomString } from "./utils";
+
+export async function fetchCSV(
+  data: Data,
+  range?: DataRange,
+  options?: FetchOptions,
+): Promise<Feature[] | void> {
+  if (!data.url) {
+    const value = data.value;
+    if (typeof value !== "string") {
+      const feature = makeFeature(value, range);
+      return feature ? [feature] : undefined;
+    }
+    return await parseCSV(value, data.csv, range);
+  }
+  const csvText = await (await f(data.url, options)).text();
+  return await parseCSV(csvText, data.csv, range);
+}
+
+const parseCSV = async (
+  text: string,
+  options: Data["csv"],
+  range: DataRange | undefined,
+): Promise<Feature[] | void> => {
+  const { parse } = await import("csv-parse");
+  return new Promise((resolve, reject) => {
+    const result: Feature[] = [];
+
+    const parser = parse({
+      // Referring this specification https://csv-spec.org/.
+      delimiter: [",", ";", "\t"],
+    });
+
+    let headerKeys: string[] | undefined;
+
+    // Use the readable stream api to consume records
+    parser.on("readable", () => {
+      let record;
+      while ((record = parser.read()) !== null) {
+        if (!headerKeys) {
+          if (!options?.noHeader) {
+            headerKeys = record;
+            continue;
+          }
+          headerKeys = [];
+        }
+        const value = makeGeoJSONFromArray(headerKeys, record, options);
+        const feature = makeFeature(value, range);
+        if (feature) {
+          result.push(feature);
+        }
+      }
+    });
+
+    // Catch any error
+    parser.on("error", err => {
+      reject(`${err.name} is occurred while parsing CSV: ${err.message}`);
+    });
+
+    parser.on("end", () => {
+      resolve(result);
+    });
+
+    parser.write(text);
+
+    parser.end();
+  });
+};
+
+const SUPPORTED_COORDINATES = {
+  lng: 0,
+  lat: 1,
+  height: 2,
+} as const;
+
+const setCoordinatesToPointGeometry = (
+  geometry: Point | null,
+  value: any,
+  coordIdx: (typeof SUPPORTED_COORDINATES)[keyof typeof SUPPORTED_COORDINATES],
+  optional?: boolean,
+): Point | null => {
+  if (geometry === null) {
+    return null;
+  }
+  const coordinate = Number(value);
+  if (isNaN(coordinate) || (typeof value !== "number" && !value)) {
+    return optional ? geometry : null;
+  }
+  geometry.coordinates[coordIdx] = coordinate;
+  return geometry;
+};
+
+type CSVGeoJSONFeature = GeoJSONFeature<Point | null>;
+
+const makeGeoJSONFromArray = (
+  headers: string[],
+  values: string[],
+  options: Data["csv"],
+): CSVGeoJSONFeature => {
+  const result = values.reduce(
+    (result: CSVGeoJSONFeature, element, idx) => {
+      let value: string | number = element;
+      if (!options?.disableTypeConversion) value = filterNumericString(element);
+      if (options?.idColumn !== undefined && [headers[idx], idx].includes(options.idColumn)) {
+        return {
+          ...result,
+          id: value,
+        };
+      }
+
+      if (options?.lngColumn !== undefined && [headers[idx], idx].includes(options.lngColumn)) {
+        return {
+          ...result,
+          geometry: setCoordinatesToPointGeometry(
+            result.geometry,
+            value,
+            SUPPORTED_COORDINATES.lng,
+          ),
+        };
+      }
+      if (options?.latColumn !== undefined && [headers[idx], idx].includes(options.latColumn)) {
+        return {
+          ...result,
+          geometry: setCoordinatesToPointGeometry(
+            result.geometry,
+            value,
+            SUPPORTED_COORDINATES.lat,
+          ),
+        };
+      }
+      if (
+        options?.heightColumn !== undefined &&
+        [headers[idx], idx].includes(options.heightColumn)
+      ) {
+        return {
+          ...result,
+          geometry: setCoordinatesToPointGeometry(
+            result.geometry,
+            value,
+            SUPPORTED_COORDINATES.height,
+            true,
+          ),
+        };
+      }
+
+      return {
+        ...result,
+        properties: {
+          ...result.properties,
+          ...(headers[idx] ? { [headers[idx]]: value } : {}),
+        },
+      };
+    },
+    {
+      type: "Feature",
+      geometry: {
+        type: "Point",
+        coordinates: [],
+      },
+      properties: {},
+    },
+  );
+  if ((result.geometry?.coordinates.length || 0) < 2) {
+    result.geometry = null;
+  }
+  return result;
+};
+
+const makeFeature = (value: CSVGeoJSONFeature, range: DataRange | undefined): Feature | void => {
+  if (value.type !== "Feature") {
+    return;
+  }
+
+  const geo = value.geometry;
+  return {
+    type: "feature",
+    id: (value.id && String(value.id)) || generateRandomString(12),
+    geometry: geo ?? undefined,
+    properties: value.properties,
+    range,
+  };
+};
+
+const filterNumericString = (input: string): number | string => {
+  const parsed = Number(input);
+  if (isNaN(parsed) || input === "") {
+    return input;
+  }
+  return parsed;
+};
diff --git a/web/src/beta/core/mantle/data/geojson.ts b/web/src/beta/core/mantle/data/geojson.ts
new file mode 100644
index 0000000000..2ae77cd177
--- /dev/null
+++ b/web/src/beta/core/mantle/data/geojson.ts
@@ -0,0 +1,72 @@
+import type { GeoJSON } from "geojson";
+
+import type { Data, DataRange, Feature } from "../types";
+
+import { f, FetchOptions, generateRandomString } from "./utils";
+
+export async function fetchGeoJSON(
+  data: Data,
+  range?: DataRange,
+  options?: FetchOptions,
+): Promise<Feature[] | void> {
+  const d = data.url ? await (await f(data.url, options)).json() : data.value;
+  return processGeoJSON(d, range);
+}
+
+export function processGeoJSON(geojson: GeoJSON, range?: DataRange): Feature[] {
+  if (geojson.type === "FeatureCollection") {
+    return geojson.features.flatMap(f => processGeoJSON(f, range));
+  }
+
+  if (geojson.type === "Feature") {
+    const geo = geojson.geometry;
+    if (geo.type === "MultiPoint") {
+      return geo.coordinates.flatMap(coord => {
+        return processGeoJSON({
+          ...geojson,
+          geometry: {
+            type: "Point",
+            coordinates: coord,
+          },
+        });
+      });
+    }
+    if (geo.type === "MultiLineString") {
+      return geo.coordinates.flatMap(coord => {
+        return processGeoJSON({
+          ...geojson,
+          geometry: {
+            type: "LineString",
+            coordinates: coord,
+          },
+        });
+      });
+    }
+    if (geo.type === "MultiPolygon") {
+      return geo.coordinates.flatMap(coord => {
+        return processGeoJSON({
+          ...geojson,
+          geometry: {
+            type: "Polygon",
+            coordinates: coord,
+          },
+        });
+      });
+    }
+
+    return [
+      {
+        type: "feature",
+        id: (geojson.id && String(geojson.id)) || generateRandomString(12),
+        geometry:
+          geo.type === "Point" || geo.type === "LineString" || geo.type === "Polygon"
+            ? geo
+            : undefined,
+        properties: geojson.properties,
+        range,
+      },
+    ];
+  }
+
+  return [];
+}
diff --git a/web/src/beta/core/mantle/data/georss.ts b/web/src/beta/core/mantle/data/georss.ts
new file mode 100644
index 0000000000..131ecd63c3
--- /dev/null
+++ b/web/src/beta/core/mantle/data/georss.ts
@@ -0,0 +1,172 @@
+import { XMLParser, X2jOptionsOptional } from "fast-xml-parser";
+
+import type { Data, DataRange, Feature, Geometry } from "../types";
+
+import { getGeometryOfItem } from "./gml";
+import type { Shape } from "./gml";
+import { f, convertToCoordinates, FetchOptions } from "./utils";
+
+export async function fetchGeoRSS(
+  data: Data,
+  _range?: DataRange,
+  options?: FetchOptions,
+): Promise<Feature[] | void> {
+  const xmlDataStr = data.url ? await (await f(data.url, options)).text() : data.value;
+  return handler(xmlDataStr);
+}
+
+function handler(xmlDataStr: string) {
+  const cleanXml = xmlDataStr.replace(/([a-zA-Z]+:)/g, "");
+  const geoRSSData = parseBuffer(cleanXml);
+  if ("rss" in geoRSSData) {
+    return parseGeoRSS2(geoRSSData as GeoRSS2);
+  } else if ("feed" in geoRSSData) {
+    return parseGeoRSSAtom(geoRSSData as GeoRSSAtom);
+  } else {
+    throw new Error("GeoRSS format not supported");
+  }
+}
+
+function parseBuffer(xmlDataStr: string) {
+  const options: X2jOptionsOptional = {
+    ignoreAttributes: false,
+    attributeNamePrefix: "",
+  };
+  const parser = new XMLParser(options);
+  return parser.parse(xmlDataStr);
+}
+
+function parseGeoRSSAtom(geoRSS: GeoRSSAtom): Feature[] {
+  const { entry } = geoRSS.feed;
+  return parserEntries(entry);
+}
+
+function parseGeoRSS2(geoRSS: GeoRSS2) {
+  const item = geoRSS.rss.channel.item;
+  return parserEntries(item);
+}
+
+function parserEntries(entry: Entry[]) {
+  const result: Feature[] = [];
+  for (const item of entry) {
+    let geometry: Geometry = {
+      type: "Point",
+      coordinates: [1, 1],
+    };
+
+    if (item.where) {
+      const shape = item.where;
+      geometry = getGeometryOfItem(shape);
+    } else if (item.point) {
+      geometry = {
+        type: "Point",
+        coordinates: convertToCoordinates(item.point),
+      };
+    } else if (item.line) {
+      geometry = {
+        type: "LineString",
+        coordinates: item.line.split(" ").map(point => convertToCoordinates(point)),
+      };
+    } else if (item.polygon || item.box) {
+      let coordinates = [0];
+      if (item.polygon) {
+        coordinates = convertToCoordinates(item.polygon);
+      } else if (item.box) {
+        coordinates = convertToCoordinates(item.box);
+      }
+      geometry = {
+        type: "Polygon",
+        coordinates: [
+          [
+            [coordinates[1], coordinates[0]],
+            [coordinates[3], coordinates[2]],
+            [coordinates[5], coordinates[4]],
+            [coordinates[1], coordinates[0]],
+          ],
+        ],
+      };
+    }
+
+    const feature: Feature = {
+      type: "feature",
+      id: item.id,
+      properties: {
+        title: item.title,
+        link: item.link.href,
+        id: item.id,
+        updated: item.updated,
+        content: item.content,
+      },
+      geometry,
+    };
+
+    result.push(feature);
+  }
+
+  return result;
+}
+
+type Link = {
+  href: string;
+};
+
+type Author = {
+  name: string;
+  email: string;
+};
+
+type Entry = {
+  title: string;
+  link: Link;
+  id: string;
+  updated: string;
+  content: string;
+  where?: Shape;
+  point?: string;
+  line?: string;
+  polygon?: string;
+  box?: string;
+  Point?: {
+    lat: number;
+    long: number;
+  };
+  lat_long?: string;
+};
+
+type Feed = {
+  title: string;
+  subtitle: string;
+  link: Link[];
+  updated: string;
+  author: Author;
+  entry: Entry[];
+  xmlns: string;
+  georss: string;
+  gml: string;
+  geo: string;
+};
+
+type GeoRSSAtom = {
+  feed: Feed;
+};
+
+type GeoRSS2 = {
+  rss: RSS;
+};
+
+type RSS = {
+  channel: Channel;
+  xmlns: string;
+  georss: string;
+  gml: string;
+  geo: string;
+};
+
+type Channel = {
+  title: string;
+  subtitle: string;
+  link: Link[];
+  updated: string;
+  author: Author;
+  item: Entry[];
+};
diff --git a/web/src/beta/core/mantle/data/gml.ts b/web/src/beta/core/mantle/data/gml.ts
new file mode 100644
index 0000000000..aa95692815
--- /dev/null
+++ b/web/src/beta/core/mantle/data/gml.ts
@@ -0,0 +1,244 @@
+import { XMLParser, X2jOptionsOptional } from "fast-xml-parser";
+
+import type { Data, DataRange, Feature, Geometry } from "../types";
+
+import { f, convertToCoordinates, FetchOptions } from "./utils";
+
+export async function fetchGMLData(
+  data: Data,
+  _range?: DataRange,
+  options?: FetchOptions,
+): Promise<Feature[] | void> {
+  const xmlDataStr = data.url ? await (await f(data.url, options)).text() : data.value;
+  return handler(xmlDataStr);
+}
+
+function handler(xmlDataStr: string) {
+  const cleanXml = xmlDataStr.replace(/([a-zA-Z]+:)/g, "");
+
+  const gmlData = parseBuffer(cleanXml);
+  return transform(gmlData);
+}
+
+function parseBuffer(xmlDataStr: string) {
+  const options: X2jOptionsOptional = {
+    ignoreAttributes: false,
+    attributeNamePrefix: "",
+  };
+  const parser = new XMLParser(options);
+  return parser.parse(xmlDataStr) as GMLFeatureCollection;
+}
+
+function transform(gmlFeatureCollection: GMLFeatureCollection): Feature[] {
+  const stations = gmlFeatureCollection.FeatureCollection.featureMember;
+  const result: Feature[] = [];
+
+  if (stations) {
+    for (const station of stations) {
+      const {
+        Shape: shape,
+        name: name,
+        WMO_ID: WMO_ID,
+        alternative_ID: alternative_ID,
+        elevation: elevation,
+        hash: hash,
+        fid: fid,
+      } = station["stations_mix-obs"];
+      const properties = {
+        name,
+        WMO_ID,
+        alternative_ID,
+        elevation,
+        hash,
+        fid,
+      };
+
+      const geometry = getGeometryOfItem(shape);
+
+      const feature: Feature = {
+        type: "feature",
+        id: fid,
+        properties,
+        geometry,
+      };
+      result.push(feature);
+    }
+  }
+  return result;
+}
+
+export function getGeometryOfItem(shape: Shape): Geometry {
+  let geometry: Geometry = {
+    type: "Point",
+    coordinates: [1],
+  };
+
+  if ("Point" in shape) {
+    const coordinates = getCoordinatesFromPoint(shape.Point);
+    if (coordinates) {
+      geometry = {
+        type: "Point",
+        coordinates: convertToCoordinates(coordinates),
+      };
+    }
+  } else if ("MultiPoint" in shape) {
+    geometry = {
+      type: "MultiPoint",
+      coordinates: shape.MultiPoint.pointMember.map(point => {
+        const coordinates = getCoordinatesFromPoint(point.Point);
+        return convertToCoordinates(coordinates);
+      }),
+    };
+  } else if ("LineString" in shape) {
+    const lineString = shape.LineString;
+    geometry = {
+      type: "LineString",
+      coordinates: lineString.posList.split(" ").map(point => convertToCoordinates(point)),
+    };
+  } else if ("MultiLineString" in shape) {
+    geometry = {
+      type: "MultiLineString",
+      coordinates: shape.MultiLineString.lineStringMember.map(lineString => {
+        const line = lineString.LineString;
+        return line.posList.split(" ").map(point => convertToCoordinates(point));
+      }),
+    };
+  } else if ("MultiPolygon" in shape) {
+    let interior: number[][][] = [[[1]]];
+    geometry = {
+      type: "MultiPolygon",
+      coordinates: shape.MultiPolygon.polygonMember.map(polygon => {
+        const exterior = polygon.Polygon.exterior.LinearRing.posList
+          .split(" ")
+          .map(point => convertToCoordinates(point));
+        if (polygon.Polygon.interior) {
+          interior = polygon.Polygon.interior.map(interiorRing => {
+            const ring = interiorRing.LinearRing;
+            return ring.posList.split(" ").map(point => convertToCoordinates(point));
+          });
+        }
+        return [exterior, ...interior];
+      }),
+    };
+  } else if ("Polygon" in shape) {
+    const polygon = shape.Polygon;
+    const exterior = polygon.exterior.LinearRing.posList
+      .split(" ")
+      .map(point => convertToCoordinates(point));
+    let interior: number[][][] = [[[]]];
+    if (polygon.interior) {
+      interior = polygon.interior.map(interiorRing => {
+        const ring = interiorRing.LinearRing;
+        return ring.posList.split(" ").map(point => convertToCoordinates(point));
+      });
+    }
+    geometry = {
+      type: "Polygon",
+      coordinates: [exterior, ...interior],
+    };
+  } else {
+    throw new Error("unsupported shape");
+  }
+
+  return geometry;
+}
+
+function getCoordinatesFromPoint(point: Coordinates) {
+  if (point.coordinates) {
+    return point.coordinates;
+  } else if (point.pos) {
+    return point.pos;
+  }
+  throw new Error("something went wrong");
+}
+
+type Xml = {
+  version: string;
+  encoding: string;
+};
+
+type Coordinates = {
+  pos?: string;
+  coordinates?: string;
+  srsName?: string;
+};
+
+type Point = {
+  Point: Coordinates;
+};
+
+type MultiPoint = {
+  MultiPoint: {
+    pointMember: Point[];
+  };
+};
+
+type LineString = {
+  LineString: Coordinates & {
+    posList: string;
+  };
+};
+
+type MultiLineString = {
+  MultiLineString: {
+    lineStringMember: LineString[];
+  };
+};
+
+type Polygon = {
+  Polygon: {
+    exterior: {
+      LinearRing: Coordinates & {
+        posList: string;
+      };
+    };
+    interior?: {
+      LinearRing: Coordinates & {
+        posList: string;
+      };
+    }[];
+  };
+};
+
+type MultiPolygon = {
+  MultiPolygon: {
+    polygonMember: Polygon[];
+  };
+};
+
+export type Shape = Point | MultiPoint | LineString | MultiLineString | Polygon | MultiPolygon;
+
+type StationsMixObs = {
+  "stations_mix-obs": {
+    Shape: Shape;
+    name?: string;
+    WMO_ID?: number;
+    alternative_ID?: string;
+    elevation?: string;
+    hash?: number;
+    fid: string;
+  };
+};
+
+type Box = {
+  Box: Coordinates;
+};
+
+type BoundedBy = {
+  boundedBy: Box;
+};
+
+type FeatureCollection1 = {
+  boundedBy: BoundedBy;
+  featureMember?: StationsMixObs[];
+  "xmlns:mm": string;
+  "xmlns:gml": string;
+  "xmlns:wfs": string;
+  "xmlns:xsi": string;
+  "xsi:schemaLocation": string;
+};
+
+type GMLFeatureCollection = {
+  "?xml": Xml;
+  FeatureCollection: FeatureCollection1;
+};
diff --git a/web/src/beta/core/mantle/data/gpx.test.ts b/web/src/beta/core/mantle/data/gpx.test.ts
new file mode 100644
index 0000000000..1e3d58f320
--- /dev/null
+++ b/web/src/beta/core/mantle/data/gpx.test.ts
@@ -0,0 +1,68 @@
+import { expect, test, vi } from "vitest";
+
+import { Data } from "../types";
+
+import { fetchGPXfile } from "./gpx";
+import * as Utils from "./utils";
+
+test("with header", async () => {
+  const mockGPXData = `
+<?xml version="1.0" encoding="UTF-8"?>
+<gpx version="1.1" creator="GPS Visualizer https://www.gpsvisualizer.com/">
+  <trk>
+    <name>Example GPX Data</name>
+    <trkseg>
+      <trkpt lat="37.844799" lon="-122.257127">
+        <ele>2.2</ele>
+        <time>2023-02-19T23:04:00.000Z</time>
+      </trkpt>
+      <trkpt lat="37.844812" lon="-122.257126">
+        <ele>2.1</ele>
+        <time>2023-02-19T23:04:10.000Z</time>
+      </trkpt>
+      <trkpt lat="37.844797" lon="-122.257131">
+        <ele>2.3</ele>
+        <time>2023-02-19T23:04:20.000Z</time>
+      </trkpt>
+    </trkseg>
+  </trk>
+</gpx>
+`;
+
+  test("returns a list of GeoJSON LineString features", async () => {
+    const fetchDataMock = vi.spyOn(Utils, "f");
+    fetchDataMock.mockImplementation(async () => {
+      return {
+        text: async () => mockGPXData,
+      } as Response;
+    });
+    const data: Data = {
+      type: "gpx",
+      url: "https://example.com/tracks.gpx",
+    };
+    const features = await fetchGPXfile(data);
+    expect(Array.isArray(features)).toBe(true);
+    features?.forEach(f => {
+      expect(f.type).toBe("feature");
+      expect(f?.geometry?.type).toBe("LineString");
+      expect(Array.isArray(f?.geometry?.coordinates)).toBe(true);
+      expect(f?.geometry?.coordinates.length).toBeGreaterThanOrEqual(2);
+    });
+  });
+
+  test("parses GPX files with one or multiple tracks", async () => {
+    const fetchDataMock = vi.spyOn(Utils, "f");
+    fetchDataMock.mockImplementation(async () => {
+      return {
+        text: async () => mockGPXData,
+      } as Response;
+    });
+    const data: Data = {
+      type: "gpx",
+      url: "https://example.com/tracks.gpx",
+    };
+    const features = await fetchGPXfile(data);
+    expect(Array.isArray(features)).toBe(true);
+    expect(features?.length).toBeGreaterThan(0);
+  });
+});
diff --git a/web/src/beta/core/mantle/data/gpx.ts b/web/src/beta/core/mantle/data/gpx.ts
new file mode 100644
index 0000000000..706b2e798b
--- /dev/null
+++ b/web/src/beta/core/mantle/data/gpx.ts
@@ -0,0 +1,124 @@
+import { XMLParser, X2jOptionsOptional } from "fast-xml-parser";
+import type { LineString, Position, GeoJsonProperties } from "geojson";
+
+import type { Data, DataRange, Feature } from "../types";
+
+import { f, FetchOptions, generateRandomString } from "./utils";
+
+export async function fetchGPXfile(
+  data: Data,
+  _range?: DataRange,
+  options?: FetchOptions,
+): Promise<Feature[] | void> {
+  const xmlDataStr = data.url ? await (await f(data.url, options)).text() : data.value;
+  return handler(xmlDataStr);
+}
+
+function handler(xmlDataStr: string) {
+  const gpxData = parseBuffer(xmlDataStr);
+  return transform(gpxData);
+}
+
+function parseBuffer(xmlDataStr: string) {
+  const options: X2jOptionsOptional = {
+    ignoreAttributes: false,
+    attributeNamePrefix: "@_",
+  };
+  const parser = new XMLParser(options);
+  return parser.parse(xmlDataStr) as GPX;
+}
+
+function transform(gpxFile: GPX) {
+  const trackPoints = makeTrackPoints(gpxFile.gpx.trk);
+  const lineStringFeatures = trackPoints.reduce(makeLineStringFeature, []);
+  return lineStringFeatures;
+}
+
+type TrackPoint = {
+  "@_lat": string;
+  "@_lon": string;
+  ele: number;
+  time: string;
+  // course: 23.26,
+  // speed: 0.63,
+  // fix: '3d',
+  // sat: 5,
+  // hdop: 1.4
+};
+
+type Track = {
+  trkseg: {
+    trkpt: TrackPoint[];
+  };
+};
+
+type GPX = {
+  gpx: {
+    trk: Track;
+  };
+};
+
+function makeTrackPoints(trk: GPX["gpx"]["trk"]) {
+  const trkData = [trk];
+  return trkData.reduce((trackPoints: any[], { trkseg: { trkpt } }: any) => {
+    if (Array.isArray(trkpt)) {
+      trackPoints.push(...trkpt);
+    } else {
+      trackPoints.push(trkpt);
+    }
+    return trackPoints;
+  }, [] as TrackPoint[]);
+}
+
+function feature(geom: LineString, properties?: GeoJsonProperties): Feature {
+  const feat: Feature = { type: "feature", id: generateRandomString(12) };
+  feat.properties = properties || {};
+  feat.geometry = geom;
+  return feat;
+}
+
+function lineString(coordinates: Position[], properties?: GeoJsonProperties): Feature {
+  if (coordinates.length < 2) {
+    throw new Error("coordinates must be an array of two or more positions");
+  }
+  const geom: LineString = {
+    type: "LineString",
+    coordinates,
+  };
+  return feature(geom, properties);
+}
+
+function makeLineStringFeature(
+  accumulator: Feature[],
+  currentValue: TrackPoint,
+  index: number,
+  trackPoints: TrackPoint[],
+) {
+  accumulator.push(
+    lineString(getRecords(trackPoints, index).map(getPosition), mapProperties(currentValue)),
+  );
+  return accumulator;
+}
+
+function getPosition({ "@_lon": lon, "@_lat": lat, ele }: TrackPoint): Position {
+  const position = [Number(lon), Number(lat)];
+  if (ele !== undefined) position.push(Number(ele));
+  return position;
+}
+
+function getRecords(trackPoints: TrackPoint[], index: number) {
+  if (index > 0) {
+    return [trackPoints[index - 1], trackPoints[index]];
+  }
+  if (trackPoints.length === 1) {
+    return [trackPoints[index], trackPoints[index]];
+  }
+  return [trackPoints[index], trackPoints[index + 1]];
+}
+
+function mapProperties(trackPoint: GeoJsonProperties) {
+  return {
+    ...trackPoint,
+    timestamp: trackPoint?.time as string,
+  };
+}
diff --git a/web/src/beta/core/mantle/data/gtfs.ts b/web/src/beta/core/mantle/data/gtfs.ts
new file mode 100644
index 0000000000..a8e7b1e716
--- /dev/null
+++ b/web/src/beta/core/mantle/data/gtfs.ts
@@ -0,0 +1,116 @@
+import Pbf from "pbf";
+
+import type { Data, DataRange, Feature } from "../types";
+
+import { Trips, Trip, GTFS, GTFSReader } from "./gtfsReader";
+import { f, FetchOptions } from "./utils";
+
+let gtfs: GTFS = {};
+let current: Trips = {};
+let previous: Trips = {};
+let tripsData: Trips = {};
+
+export async function fetchGTFS(
+  data: Data,
+  range?: DataRange,
+  options?: FetchOptions,
+): Promise<Feature[] | void> {
+  const fetchData = async () => {
+    try {
+      const arrayBuffer = data.url ? await (await f(data.url, options)).arrayBuffer() : data.value;
+      const pbfBuffer = new Pbf(new Uint8Array(arrayBuffer));
+      gtfs = new GTFSReader().read(pbfBuffer);
+    } catch (err) {
+      throw new Error(`failed to fetch gtfs: ${err}`);
+    }
+  };
+  await fetchData();
+
+  return processGTFS(gtfs, range);
+}
+
+export function processGTFS(gtfs?: GTFS, _range?: DataRange): Feature[] | void {
+  if (gtfs) {
+    if (current) {
+      previous = current;
+      const currentTrips = GTFStoTrips(gtfs);
+      current = currentTrips;
+      const merged = mergeTrips(currentTrips, previous);
+
+      tripsData = merged;
+    } else {
+      const currentTrips = GTFStoTrips(gtfs);
+      current = currentTrips;
+      tripsData = currentTrips;
+    }
+  }
+
+  return tripsData?.trips
+    ?.filter(f => !!f.properties.position)
+    .map(f => {
+      return {
+        type: "feature",
+        id: f.id,
+        geometry: {
+          type: "Point",
+          coordinates: [
+            f.properties.position?.longitude || 0,
+            f.properties.position?.latitude || 0,
+          ],
+        },
+        properties: f.properties,
+      };
+    });
+}
+
+export const GTFStoTrips = (gtfs: GTFS): Trips => {
+  const trips = gtfs.entities?.map(entity => ({
+    id: entity.id,
+    properties: entity.vehicle,
+    path: [[entity.vehicle?.position?.longitude, entity.vehicle?.position?.latitude]],
+    timestamps: [entity.vehicle?.timestamp],
+  }));
+  return {
+    timestamp: gtfs.header?.timestamp,
+    trips: trips as Trip[],
+  };
+};
+
+export const mergeTrips = (current: Trips, prev?: Trips) => {
+  if (prev) {
+    const prevMap = new Map();
+    prev?.trips?.forEach(trip => {
+      prevMap.set(trip.id, trip);
+    });
+    const mergedMap = new Map();
+    const newIds: string[] = [];
+    current?.trips?.forEach(entity => {
+      const previousEntity = prevMap.get(entity.id);
+      if (previousEntity) {
+        const previousPath = previousEntity.path;
+        const previousTimestamps = previousEntity.timestamps;
+        const trip = {
+          id: entity.id,
+          properties: entity.properties,
+          path: [...previousPath, ...entity.path],
+          timestamps: [...previousTimestamps, ...entity.timestamps],
+        };
+        mergedMap.set(entity.id, trip);
+      } else {
+        mergedMap.set(entity.id, entity);
+        newIds.push(entity.id);
+      }
+    });
+    const trips = Object.fromEntries(mergedMap);
+    const mergedTrips = Object.values(trips).filter(
+      entity =>
+        newIds.includes((entity as Trip).id) ||
+        (entity as Trip).path.length > prevMap.get((entity as Trip).id).path.length,
+    );
+    return {
+      timestamp: current.timestamp,
+      trips: mergedTrips as Trip[],
+    };
+  }
+  return current;
+};
diff --git a/web/src/beta/core/mantle/data/gtfsReader.ts b/web/src/beta/core/mantle/data/gtfsReader.ts
new file mode 100644
index 0000000000..e14af120f5
--- /dev/null
+++ b/web/src/beta/core/mantle/data/gtfsReader.ts
@@ -0,0 +1,454 @@
+import Pbf from "pbf";
+
+export type GTFS = {
+  header?: Header | null;
+  entities?: Entity[];
+};
+
+export type Header = {
+  gtfs_realtime_version?: string;
+  incrementality?: HeaderIncrementality;
+  timestamp?: number;
+};
+
+export type Entity = {
+  id?: string;
+  is_deleted?: boolean;
+  trip_update?: TripUpdate | null;
+  vehicle?: VehiclePosition | null;
+  alert?: Alert | null;
+};
+
+export type TripUpdate = {
+  trip?: TripDescriptor | null;
+  vehicle?: VehicleDescriptor | null;
+  stop_time_update?: StopTimeUpdate[];
+  timestamp?: number;
+  delay?: number;
+};
+
+export type StopTimeEvent = {
+  delay?: number;
+  time?: number;
+  uncertainty?: number;
+};
+
+export type StopTimeUpdate = {
+  stop_sequence?: number;
+  stop_id?: string;
+  arrival?: StopTimeEvent | null;
+  departure?: StopTimeEvent | null;
+  schedule_relationship?: StopTimeUpdateScheduleRelationship;
+};
+
+export type VehiclePosition = {
+  trip?: TripDescriptor | null;
+  vehicle?: VehicleDescriptor | null;
+  position?: Position | null;
+  current_stop_sequence?: number;
+  stop_id?: string;
+  current_status?: VehicleStopStatus;
+  timestamp?: number;
+  congestion_level?: CongestionLevel;
+  occupancy_status?: OccupancyStatus;
+};
+
+export type Alert = {
+  active_period?: TimeRange[];
+  informed_entity?: EntitySelector[];
+  cause?: AlertCause;
+  effect?: AlertEffect;
+  url?: TranslatedString | null;
+  header_text?: TranslatedString | null;
+  description_text?: TranslatedString | null;
+};
+
+export type TimeRange = {
+  start?: number;
+  end?: number;
+};
+
+export type Position = {
+  latitude?: number;
+  longitude?: number;
+  bearing?: number;
+  odometer?: number;
+  speed?: number;
+};
+
+export type TripDescriptor = {
+  trip_id?: string;
+  route_id?: string;
+  direction_id?: number;
+  start_time?: string;
+  start_date?: string;
+  schedule_relationship?: TripDescriptorScheduleRelationship;
+};
+
+export type VehicleDescriptor = {
+  id?: string;
+  label?: string;
+  license_plate?: string;
+};
+
+export type EntitySelector = {
+  agency_id?: string;
+  route_id?: string;
+  route_type?: number;
+  trip?: TripDescriptor | null;
+  stop_id?: string;
+};
+
+export type TranslatedString = {
+  translation?: Translation[];
+};
+
+export type Translation = {
+  text?: string;
+  language?: string;
+};
+
+export type Trips = {
+  timestamp?: number;
+  trips?: Trip[];
+};
+
+export type Trip = {
+  id: string;
+  properties: VehiclePosition;
+  path: [number, number][];
+  timestamps: number[];
+};
+
+export abstract class ProtobufMessageReader<T> {
+  abstract readonly defaultMessage: T;
+
+  public read(pbf: Pbf, end?: number): T {
+    return pbf.readFields(this.readField, this.defaultMessage, end);
+  }
+
+  protected abstract readField(tag: number, obj?: T, pbf?: Pbf): void;
+}
+
+export class GTFSReader extends ProtobufMessageReader<GTFS> {
+  readonly defaultMessage: GTFS = {
+    header: null,
+    entities: [],
+  };
+
+  protected readField(tag: number, obj = {} as GTFS, pbf: Pbf): void {
+    if (tag === 1) obj.header = new HeaderReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 2)
+      obj.entities?.push(new EntityReader().read(pbf, pbf.readVarint() + pbf.pos));
+  }
+}
+
+enum HeaderIncrementality {
+  FULL_DATASET,
+  DIFFERENTIAL,
+}
+
+export class HeaderReader extends ProtobufMessageReader<Header> {
+  readonly defaultMessage: Header = {
+    gtfs_realtime_version: "",
+    incrementality: HeaderIncrementality.FULL_DATASET,
+    timestamp: 0,
+  };
+
+  protected readField(tag: number, obj = {} as Header, pbf: Pbf): void {
+    if (tag === 1) obj.gtfs_realtime_version = pbf.readString();
+    else if (tag === 2) obj.incrementality = pbf.readVarint();
+    else if (tag === 3) obj.timestamp = pbf.readVarint();
+  }
+}
+
+export class EntityReader extends ProtobufMessageReader<Entity> {
+  readonly defaultMessage: Entity = {
+    id: "",
+    is_deleted: false,
+    trip_update: null,
+    vehicle: null,
+    alert: null,
+  };
+
+  protected readField(tag: number, obj = {} as Entity, pbf: Pbf): void {
+    if (tag === 1) obj.id = pbf.readString();
+    else if (tag === 2) obj.is_deleted = pbf.readBoolean();
+    else if (tag === 3)
+      obj.trip_update = new TripUpdateReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 4)
+      obj.vehicle = new VehiclePositionReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 5) obj.alert = new AlertReader().read(pbf, pbf.readVarint() + pbf.pos);
+  }
+}
+
+export class TripUpdateReader extends ProtobufMessageReader<TripUpdate> {
+  readonly defaultMessage: TripUpdate = {
+    trip: {},
+    vehicle: {},
+    stop_time_update: [],
+    timestamp: 0,
+    delay: 0,
+  };
+
+  protected readField(tag: number, obj = {} as TripUpdate, pbf: Pbf): void {
+    if (tag === 1) obj.trip = new TripDescriptorReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 3)
+      obj.vehicle = new VehicleDescriptorReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 2)
+      obj.stop_time_update?.push(new StopTimeUpdateReader().read(pbf, pbf.readVarint() + pbf.pos));
+    else if (tag === 4) obj.timestamp = pbf.readVarint();
+    else if (tag === 5) obj.delay = pbf.readVarint(true);
+  }
+}
+
+export class StopTimeEventReader extends ProtobufMessageReader<StopTimeEvent> {
+  readonly defaultMessage: StopTimeEvent = {
+    delay: 0,
+    time: 0,
+    uncertainty: 0,
+  };
+
+  protected readField(tag: number, obj = {} as StopTimeEvent, pbf: Pbf): void {
+    if (tag === 1) obj.delay = pbf.readVarint(true);
+    else if (tag === 2) obj.time = pbf.readVarint(true);
+    else if (tag === 3) obj.uncertainty = pbf.readVarint(true);
+  }
+}
+
+export class StopTimeUpdateReader extends ProtobufMessageReader<StopTimeUpdate> {
+  readonly defaultMessage: StopTimeUpdate = {
+    stop_sequence: 0,
+    stop_id: "",
+    arrival: null,
+    departure: null,
+    schedule_relationship: StopTimeUpdateScheduleRelationship.NO_DATA,
+  };
+
+  protected readField(tag: number, obj = {} as StopTimeUpdate, pbf: Pbf): void {
+    if (tag === 1) obj.stop_sequence = pbf.readVarint();
+    else if (tag === 4) obj.stop_id = pbf.readString();
+    else if (tag === 2)
+      obj.arrival = new StopTimeEventReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 3)
+      obj.departure = new StopTimeEventReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 5) obj.schedule_relationship = pbf.readVarint();
+  }
+}
+
+enum StopTimeUpdateScheduleRelationship {
+  SCHEDULED,
+  SKIPPED,
+  NO_DATA,
+}
+
+export class VehiclePositionReader extends ProtobufMessageReader<VehiclePosition> {
+  readonly defaultMessage: VehiclePosition = {
+    trip: null,
+    vehicle: null,
+    position: null,
+    current_stop_sequence: 0,
+    stop_id: "",
+    current_status: VehicleStopStatus.IN_TRANSIT_TO,
+    timestamp: 0,
+    congestion_level: CongestionLevel.UNKNOWN_CONGESTION_LEVEL,
+    occupancy_status: OccupancyStatus.EMPTY,
+  };
+
+  protected readField(tag: number, obj = {} as VehiclePosition, pbf: Pbf): void {
+    if (tag === 1) obj.trip = new TripDescriptorReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 8)
+      obj.vehicle = new VehicleDescriptorReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 2) obj.position = new PositionReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 3) obj.current_stop_sequence = pbf.readVarint();
+    else if (tag === 7) obj.stop_id = pbf.readString();
+    else if (tag === 4) obj.current_status = pbf.readVarint();
+    else if (tag === 5) obj.timestamp = pbf.readVarint();
+    else if (tag === 6) obj.congestion_level = pbf.readVarint();
+    else if (tag === 9) obj.occupancy_status = pbf.readVarint();
+  }
+}
+
+export enum VehicleStopStatus {
+  INCOMING_AT,
+  STOPPED_AT,
+  IN_TRANSIT_TO,
+}
+
+export enum CongestionLevel {
+  UNKNOWN_CONGESTION_LEVEL,
+  RUNNING_SMOOTHLY,
+  STOP_AND_GO,
+  CONGESTION,
+  SEVERE_CONGESTION,
+}
+
+export enum OccupancyStatus {
+  EMPTY,
+  MANY_SEATS_AVAILABLE,
+  FEW_SEATS_AVAILABLE,
+  STANDING_ROOM_ONLY,
+  CRUSHED_STANDING_ROOM_ONLY,
+  FULL,
+  NOT_ACCEPTING_PASSENGERS,
+}
+
+export class AlertReader extends ProtobufMessageReader<Alert> {
+  readonly defaultMessage: Alert = {
+    active_period: [],
+    informed_entity: [],
+    cause: AlertCause.CONSTRUCTION,
+    effect: AlertEffect.STOP_MOVED,
+    url: null,
+    header_text: null,
+    description_text: null,
+  };
+
+  protected readField(tag: number, obj = {} as Alert, pbf: Pbf): void {
+    if (tag === 1)
+      obj.active_period?.push(new TimeRangeReader().read(pbf, pbf.readVarint() + pbf.pos));
+    else if (tag === 5)
+      obj.informed_entity?.push(new EntitySelectorReader().read(pbf, pbf.readVarint() + pbf.pos));
+    else if (tag === 6) obj.cause = pbf.readVarint();
+    else if (tag === 7) obj.effect = pbf.readVarint();
+    else if (tag === 8)
+      obj.url = new TranslatedStringReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 10)
+      obj.header_text = new TranslatedStringReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 11)
+      obj.description_text = new TranslatedStringReader().read(pbf, pbf.readVarint() + pbf.pos);
+  }
+}
+
+enum AlertCause {
+  UNKNOWN_CAUSE = 1,
+  OTHER_CAUSE,
+  TECHNICAL_PROBLEM,
+  STRIKE,
+  DEMONSTRATION,
+  ACCIDENT,
+  HOLIDAY,
+  WEATHER,
+  MAINTENANCE,
+  CONSTRUCTION,
+  POLICE_ACTIVITY,
+  MEDICAL_EMERGENCY,
+}
+
+enum AlertEffect {
+  NO_SERVICE = 1,
+  REDUCED_SERVICE,
+  SIGNIFICANT_DELAYS,
+  ADDITIONAL_SERVICE,
+  MODIFIED_SERVICE,
+  OTHER_EFFECT,
+  UNKNOWN_EFFECT,
+  STOP_MOVED,
+}
+
+export class TimeRangeReader extends ProtobufMessageReader<TimeRange> {
+  readonly defaultMessage: TimeRange = {
+    start: 0,
+    end: 0,
+  };
+
+  protected readField(tag: number, obj = {} as TimeRange, pbf: Pbf): void {
+    if (tag === 1) obj.start = pbf.readVarint();
+    else if (tag === 2) obj.end = pbf.readVarint();
+  }
+}
+
+export class PositionReader extends ProtobufMessageReader<Position> {
+  readonly defaultMessage: Position = {
+    latitude: 0,
+    longitude: 0,
+    bearing: 0,
+    odometer: 0,
+    speed: 0,
+  };
+
+  protected readField(tag: number, obj = {} as Position, pbf: Pbf): void {
+    if (tag === 1) obj.latitude = pbf.readFloat();
+    else if (tag === 2) obj.longitude = pbf.readFloat();
+    else if (tag === 3) obj.bearing = pbf.readFloat();
+    else if (tag === 4) obj.odometer = pbf.readDouble();
+    else if (tag === 5) obj.speed = pbf.readFloat();
+  }
+}
+
+export class TripDescriptorReader extends ProtobufMessageReader<TripDescriptor> {
+  readonly defaultMessage: TripDescriptor = {
+    trip_id: "",
+    route_id: "",
+    direction_id: 0,
+    start_time: "",
+    start_date: "",
+    schedule_relationship: TripDescriptorScheduleRelationship.SCHEDULED,
+  };
+
+  protected readField(tag: number, obj = {} as TripDescriptor, pbf: Pbf): void {
+    if (tag === 1) obj.trip_id = pbf.readString();
+    else if (tag === 5) obj.route_id = pbf.readString();
+    else if (tag === 6) obj.direction_id = pbf.readVarint();
+    else if (tag === 2) obj.start_time = pbf.readString();
+    else if (tag === 3) obj.start_date = pbf.readString();
+    else if (tag === 4) obj.schedule_relationship = pbf.readVarint();
+  }
+}
+
+enum TripDescriptorScheduleRelationship {
+  SCHEDULED,
+  ADDED,
+  UNSCHEDULED,
+  CANCELED,
+}
+
+export class VehicleDescriptorReader extends ProtobufMessageReader<VehicleDescriptor> {
+  readonly defaultMessage: VehicleDescriptor = {
+    id: "",
+    label: "",
+    license_plate: "",
+  };
+
+  protected readField(tag: number, obj = {} as VehicleDescriptor, pbf: Pbf): void {
+    if (tag === 1) obj.id = pbf.readString();
+    else if (tag === 2) obj.label = pbf.readString();
+    else if (tag === 3) obj.license_plate = pbf.readString();
+  }
+}
+
+export class EntitySelectorReader extends ProtobufMessageReader<EntitySelector> {
+  readonly defaultMessage: EntitySelector = {
+    agency_id: "",
+    route_id: "",
+    route_type: 0,
+    trip: null,
+    stop_id: "",
+  };
+
+  protected readField(tag: number, obj = {} as EntitySelector, pbf: Pbf): void {
+    if (tag === 1) obj.agency_id = pbf.readString();
+    else if (tag === 2) obj.route_id = pbf.readString();
+    else if (tag === 3) obj.route_type = pbf.readVarint(true);
+    else if (tag === 4) obj.trip = new TripDescriptorReader().read(pbf, pbf.readVarint() + pbf.pos);
+    else if (tag === 5) obj.stop_id = pbf.readString();
+  }
+}
+
+export class TranslatedStringReader extends ProtobufMessageReader<TranslatedString> {
+  readonly defaultMessage: TranslatedString = { translation: [] };
+
+  protected readField(tag: number, obj = {} as TranslatedString, pbf: Pbf): void {
+    if (tag === 1)
+      obj.translation?.push(new TranslationReader().read(pbf, pbf.readVarint() + pbf.pos));
+  }
+}
+
+export class TranslationReader extends ProtobufMessageReader<Translation> {
+  readonly defaultMessage: Translation = { text: "", language: "" };
+
+  protected readField(tag: number, obj = {} as Translation, pbf: Pbf): void {
+    if (tag === 1) obj.text = pbf.readString();
+    else if (tag === 2) obj.language = pbf.readString();
+  }
+}
diff --git a/web/src/beta/core/mantle/data/index.test.ts b/web/src/beta/core/mantle/data/index.test.ts
new file mode 100644
index 0000000000..e8ccdf20a5
--- /dev/null
+++ b/web/src/beta/core/mantle/data/index.test.ts
@@ -0,0 +1,16 @@
+import { expect, test } from "vitest";
+
+import { guessType } from ".";
+
+test("guessType", () => {
+  expect(guessType("https://example.com/aaa/aaa.kml")).toBe("kml");
+  expect(guessType("https://example.com/aaa/aaa.kmz")).toBe("kml");
+  expect(guessType("https://example.com/aaa/aaa.czml")).toBe("czml");
+  expect(guessType("https://example.com/aaa/aaa.gltf")).toBe("gltf");
+  expect(guessType("https://example.com/aaa/aaa.glb")).toBe("gltf");
+  expect(guessType("https://example.com/aaa/aaa.geojson")).toBe("geojson");
+  expect(guessType("https://example.com/aaa/aaa.json")).toBe("geojson");
+  expect(guessType("https://example.com/aaa/aaa.topojson")).toBe("geojson");
+  expect(guessType("https://example.com/aaa/{z}/{x}/{y}.png")).toBe("tiles");
+  expect(guessType("https://example.com/aaa/{z}/{x}/{y}.mvt")).toBe("mvt");
+});
diff --git a/web/src/beta/core/mantle/data/index.ts b/web/src/beta/core/mantle/data/index.ts
new file mode 100644
index 0000000000..0d7101f6ed
--- /dev/null
+++ b/web/src/beta/core/mantle/data/index.ts
@@ -0,0 +1,73 @@
+import type { Data, DataRange, DataType, Feature } from "../types";
+
+import { fetchCSV } from "./csv";
+import { fetchGeoJSON } from "./geojson";
+import { fetchGeoRSS } from "./georss";
+import { fetchGMLData } from "./gml";
+import { fetchGPXfile } from "./gpx";
+import { fetchGTFS } from "./gtfs";
+import { fetchShapefile } from "./shapefile";
+import { FetchOptions } from "./utils";
+
+export type DataFetcher = (
+  data: Data,
+  range?: DataRange,
+  options?: FetchOptions,
+) => Promise<Feature[] | void>;
+
+const registry: Record<string, DataFetcher> = {
+  geojson: fetchGeoJSON,
+  csv: fetchCSV,
+  shapefile: fetchShapefile,
+  gpx: fetchGPXfile,
+  gtfs: fetchGTFS,
+  georss: fetchGeoRSS,
+  gml: fetchGMLData,
+};
+
+export async function fetchData(
+  data: Data,
+  range?: DataRange,
+  options?: FetchOptions,
+): Promise<Feature[] | void> {
+  const ext = !data.type || (data.type as string) === "auto" ? guessType(data.url) : undefined;
+  return registry[ext || data.type]?.(data, range, options);
+}
+
+export function guessType(url: string | undefined): DataType | undefined {
+  if (!url) {
+    return undefined;
+  }
+
+  try {
+    const path = new URL(url).pathname
+      .split("/")
+      .map(p => (p === "%7Bz%7D" ? "{z}" : p === "%7Bx%7D" ? "{x}" : p === "%7By%7D" ? "{y}" : p));
+
+    const file = path[path.length - 1];
+    if (file === "tileset.json") {
+      return "3dtiles";
+    }
+
+    const ext = file.split(".")[1];
+    if (extensions[ext]) {
+      return extensions[ext];
+    }
+
+    if (path.findIndex(p => p === "{z}") >= 0) {
+      return "tiles";
+    }
+
+    return ext as DataType;
+  } catch {
+    return undefined;
+  }
+}
+
+const extensions: Record<string, DataType> = {
+  json: "geojson",
+  topojson: "geojson",
+  mvt: "mvt", // If this is missing, {z} will be detected and return value will be "tiles", but it's wrong.
+  kmz: "kml",
+  glb: "gltf",
+};
diff --git a/web/src/beta/core/mantle/data/shapefile.ts b/web/src/beta/core/mantle/data/shapefile.ts
new file mode 100644
index 0000000000..52a30c7269
--- /dev/null
+++ b/web/src/beta/core/mantle/data/shapefile.ts
@@ -0,0 +1,232 @@
+import type { GeoJSON } from "geojson";
+import JSZip from "jszip";
+
+import type { Data, DataRange, Feature } from "../types";
+
+import { processGeoJSON } from "./geojson";
+import { f, FetchOptions } from "./utils";
+
+export async function fetchShapefile(
+  data: Data,
+  range?: DataRange,
+  options?: FetchOptions,
+): Promise<Feature[] | void> {
+  const arrayBuffer = data.url ? await (await f(data.url, options)).arrayBuffer() : data.value;
+  const zip = await JSZip.loadAsync(new Uint8Array(arrayBuffer));
+
+  let shpFileArrayBuffer: ArrayBuffer | undefined;
+  let dbfFileArrayBuffer: ArrayBuffer | undefined;
+
+  // Access the files inside the ZIP archive
+  const zipEntries = Object.values(zip.files);
+  for (const entry of zipEntries) {
+    const filename = entry.name;
+    if (filename.endsWith(".shp")) {
+      shpFileArrayBuffer = await entry.async("arraybuffer");
+    } else if (filename.endsWith(".dbf")) {
+      dbfFileArrayBuffer = await entry.async("arraybuffer");
+    }
+  }
+
+  if (shpFileArrayBuffer && dbfFileArrayBuffer) {
+    return processGeoJSON(await parseShapefiles(shpFileArrayBuffer, dbfFileArrayBuffer), range);
+  } else {
+    throw new Error(`Zip archive does not contain .shp and .dbf files`);
+  }
+}
+
+export const parseShapefiles = async (
+  shpFile: ArrayBuffer,
+  dbfFile: ArrayBuffer,
+  configuration?: Configuration,
+): Promise<GeoJSON> => {
+  return new ShapefileParser(shpFile, dbfFile, configuration).parse();
+};
+
+interface Configuration {
+  trim?: boolean;
+}
+
+class ShapefileParser {
+  #shp: ArrayBuffer;
+  #dbf: ArrayBuffer;
+  #configuration?: Configuration;
+  #features: any[] = [];
+  #propertiesArray: any[] = [];
+
+  constructor(shp: ArrayBuffer, dbf: ArrayBuffer, configuration?: Configuration) {
+    this.#shp = shp;
+    this.#dbf = dbf;
+    this.#configuration = configuration;
+  }
+
+  #parseShp() {
+    const dataView = new DataView(this.#shp);
+    let idx = 0;
+    const wordLength = dataView.getInt32((idx += 6 * 4), false);
+    const byteLength = wordLength * 2;
+    idx += 4; //version
+    idx += 4; //shapeType
+    idx += 4; //minX, minY
+    idx += 8 * 8; //min(Y, Z, M),max(X, Y, Z, M)
+
+    const features: any[] = [];
+    while (idx < byteLength) {
+      const feature: any = {};
+      const length: number = dataView.getInt32((idx += 4), false);
+
+      const type: number = dataView.getInt32((idx += 4), true);
+      let idxFeature: number = idx + 4;
+      let numberOfParts: number, nbpoints: number, numberOfPoints: number, nbpartsPoint: number[];
+      switch (type) {
+        case 1:
+        case 11:
+        case 21:
+          feature.type = "Point";
+          feature.coordinates = [
+            dataView.getFloat64(idxFeature, true),
+            dataView.getFloat64(idxFeature + 8, true),
+          ];
+          break;
+        case 3:
+        case 13:
+        case 23:
+        case 5:
+        case 15:
+        case 25:
+          if (type === 3 || type === 13 || type === 23) {
+            feature.type = "MultiLineString";
+          } else if (type === 5 || type === 15 || type === 25) {
+            feature.type = "Polygon";
+          }
+          numberOfParts = dataView.getInt32(idxFeature + 32, true);
+          nbpoints = dataView.getInt32(idxFeature + 36, true);
+          idxFeature += 40;
+          nbpartsPoint = new Array(numberOfParts).fill(0).map(() => {
+            const result = dataView.getInt32(idxFeature, true);
+            idxFeature += 4;
+            return result;
+          });
+
+          feature.coordinates = new Array(numberOfParts).fill(0).map((_, i) => {
+            const idstart = nbpartsPoint[i];
+            const idend = (i < numberOfParts - 1 ? nbpartsPoint[i + 1] : nbpoints) - 1;
+            const part = [];
+            for (let j = idstart; j <= idend; j++) {
+              part.push([
+                dataView.getFloat64(idxFeature, true),
+                dataView.getFloat64(idxFeature + 8, true),
+              ]);
+              idxFeature += 16;
+            }
+            return part;
+          });
+          break;
+        case 8:
+        case 18:
+        case 28:
+          feature.type = "MultiPoint";
+          numberOfPoints = dataView.getInt32(idxFeature + 32, true);
+          idxFeature += 36;
+          feature.coordinates = new Array(numberOfPoints).fill(0).map(() => {
+            const result = [
+              dataView.getFloat64(idxFeature, true),
+              dataView.getFloat64(idxFeature + 8, true),
+            ];
+            idxFeature += 16;
+            return result;
+          });
+          break;
+      }
+
+      idx += length * 2;
+      features.push(feature);
+    }
+    this.#features = features;
+  }
+
+  #parseDbf() {
+    const dataView = new DataView(new Uint8Array(this.#dbf).buffer);
+    let idx = 4;
+    const numberOfRecords: number = dataView.getInt32(idx, true);
+    idx += 28;
+    let end = false;
+    const fields = [];
+    while (!end) {
+      const field: any = {};
+      const nameArray: string[] = [];
+      for (let i = 0; i < 10; i++) {
+        const letter = dataView.getUint8(idx);
+        if (letter !== 0) {
+          nameArray.push(String.fromCharCode(letter));
+        }
+        idx += 1;
+      }
+      field.name = nameArray.join("");
+      idx += 1;
+      field.type = String.fromCharCode(dataView.getUint8(idx));
+      idx += 5;
+      field.fieldLength = dataView.getUint8(idx);
+      idx += 16;
+      fields.push(field);
+      if (dataView.getUint8(idx) === 0x0d) {
+        break;
+      }
+    }
+    idx += 1;
+    const propertiesArray = [];
+    for (let i = 0; i < numberOfRecords; i++) {
+      const properties: any = {};
+      if (!end) {
+        try {
+          idx += 1;
+          for (let j = 0; j < fields.length; j++) {
+            let str = "";
+            const charString = [];
+            for (let h = 0; h < fields[j].fieldLength; h++) {
+              charString.push(String.fromCharCode(dataView.getUint8(idx)));
+              idx += 1;
+            }
+            str = charString.join("");
+            // }
+            if (this.#configuration?.trim !== false) {
+              str = str.trim();
+            }
+            const number = parseFloat(str);
+            if (isNaN(number)) {
+              properties[fields[j].name] = str;
+            } else {
+              properties[fields[j].name] = number;
+            }
+          }
+        } catch (err) {
+          end = true;
+        }
+      }
+      propertiesArray.push(properties);
+    }
+    this.#propertiesArray = propertiesArray;
+  }
+
+  #geoJSON() {
+    const geojson: any = {
+      type: "FeatureCollection",
+      features: [],
+    };
+    for (let i = 0; i < Math.min(this.#features.length, this.#propertiesArray.length); i++) {
+      geojson.features.push({
+        type: "Feature",
+        geometry: this.#features[i],
+        properties: this.#propertiesArray[i],
+      });
+    }
+    return geojson;
+  }
+
+  parse(): GeoJSON {
+    this.#parseShp();
+    this.#parseDbf();
+
+    return this.#geoJSON();
+  }
+}
diff --git a/web/src/beta/core/mantle/data/utils.ts b/web/src/beta/core/mantle/data/utils.ts
new file mode 100644
index 0000000000..177af57699
--- /dev/null
+++ b/web/src/beta/core/mantle/data/utils.ts
@@ -0,0 +1,21 @@
+export { default as generateRandomString } from "@reearth/beta/utils/generate-random-string";
+
+export type FetchOptions = {
+  signal?: AbortSignal;
+};
+
+export async function f(url: string, options?: FetchOptions): Promise<Response> {
+  const res = await fetch(url, options);
+  if (res.status !== 200) {
+    throw new Error(`fetched ${url} but status code was ${res.status}`);
+  }
+  return res;
+}
+
+export function isDefined<T>(value: T | undefined | null): value is T {
+  return value !== undefined && value !== null;
+}
+
+export function convertToCoordinates(coordinates: string) {
+  return coordinates.split(" ").map(coord => parseFloat(coord));
+}
diff --git a/web/src/beta/core/mantle/evaluator/index.ts b/web/src/beta/core/mantle/evaluator/index.ts
new file mode 100644
index 0000000000..c17bf14987
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/index.ts
@@ -0,0 +1,40 @@
+import {
+  AppearanceTypes,
+  ComputedFeature,
+  Data,
+  DataRange,
+  Feature,
+  Layer,
+  LayerSimple,
+} from "../types";
+
+import { evalSimpleLayerFeature, evalSimpleLayer } from "./simple";
+
+export { clearAllExpressionCaches } from "./simple";
+
+export type EvalContext = {
+  getFeatures: (d: Data, r?: DataRange) => Promise<Feature[] | undefined>;
+  getAllFeatures: (d: Data) => Promise<Feature[] | undefined>;
+};
+
+export type EvalResult = {
+  features?: ComputedFeature[];
+  layer: Partial<AppearanceTypes>;
+};
+
+export async function evalLayer(
+  layer: LayerSimple,
+  ctx: EvalContext,
+): Promise<EvalResult | undefined> {
+  if (layer.type === "simple") {
+    return evalSimpleLayer(layer, ctx);
+  }
+  return;
+}
+
+export function evalFeature(layer: Layer, feature: Feature): ComputedFeature | undefined {
+  if (layer.type === "simple") {
+    return evalSimpleLayerFeature(layer, feature);
+  }
+  return;
+}
diff --git a/web/src/beta/core/mantle/evaluator/simple/conditionalExpression/index.ts b/web/src/beta/core/mantle/evaluator/simple/conditionalExpression/index.ts
new file mode 100644
index 0000000000..87637d9520
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/conditionalExpression/index.ts
@@ -0,0 +1,60 @@
+import { Feature, ConditionsExpression } from "../../../types";
+import { Expression } from "../expression";
+
+export class ConditionalExpression {
+  private _conditions: [string, string][];
+  private _runtimeConditions: Statement[];
+  private _feature?: Feature;
+  private _memoizedResult: any;
+
+  constructor(conditionsExpression: ConditionsExpression, feature?: Feature, defines?: any) {
+    this._conditions = conditionsExpression.conditions;
+    this._runtimeConditions = [];
+    this._feature = feature;
+    this._memoizedResult = undefined;
+
+    this.setRuntime(defines);
+  }
+
+  setRuntime(defines: any) {
+    const runtimeConditions = this._conditions?.map(statement => {
+      const cond = String(statement[0]);
+      const condExpression = String(statement[1]);
+      return new Statement(
+        new Expression(cond, this._feature, defines),
+        new Expression(condExpression, this._feature, defines),
+      );
+    });
+    this._runtimeConditions = runtimeConditions ?? [];
+    this._memoizedResult = undefined;
+  }
+
+  evaluate() {
+    if (typeof this._memoizedResult !== "undefined") {
+      return this._memoizedResult;
+    }
+
+    const conditions = this._runtimeConditions;
+    const length = conditions.length;
+    for (let i = 0; i < length; i++) {
+      const statement = conditions[i];
+      if (statement.condition.evaluate()) {
+        const result = statement.expression.evaluate();
+        this._memoizedResult = result;
+        return result;
+      }
+    }
+    const undefinedResult = undefined;
+    this._memoizedResult = undefinedResult;
+    return undefinedResult;
+  }
+}
+
+class Statement {
+  condition: Expression;
+  expression: Expression;
+  constructor(condition: Expression, expression: Expression) {
+    this.condition = condition;
+    this.expression = expression;
+  }
+}
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/constants.ts b/web/src/beta/core/mantle/evaluator/simple/expression/constants.ts
new file mode 100644
index 0000000000..23bbe897f9
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/constants.ts
@@ -0,0 +1,202 @@
+export const enum ExpressionNodeType {
+  VARIABLE,
+  UNARY,
+  BINARY,
+  TERNARY,
+  CONDITIONAL,
+  MEMBER,
+  FUNCTION_CALL,
+  ARRAY,
+  REGEX,
+  VARIABLE_IN_STRING,
+  LITERAL_NULL,
+  LITERAL_BOOLEAN,
+  LITERAL_NUMBER,
+  LITERAL_STRING,
+  LITERAL_COLOR,
+  LITERAL_VECTOR,
+  LITERAL_REGEX,
+  LITERAL_UNDEFINED,
+  BUILTIN_VARIABLE,
+}
+
+export const unaryOperators = ["!", "-", "+"];
+export const binaryOperators = [
+  "+",
+  "-",
+  "*",
+  "/",
+  "%",
+  "===",
+  "!==",
+  ">",
+  ">=",
+  "<",
+  "<=",
+  "&&",
+  "||",
+  "!~",
+  "=~",
+];
+
+export const backslashRegex = /\\/g;
+export const backslashReplacement = "@#%";
+export const replacementRegex = /@#%/g;
+
+//#rgba
+export const rgbaMatcher = /^#([0-9a-f])([0-9a-f])([0-9a-f])([0-9a-f])?$/i;
+//#rrggbbaa
+export const rrggbbaaMatcher = /^#([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})?$/i;
+
+type ColorMap = {
+  [key: string]: string;
+};
+
+export const builtInColor: ColorMap = {
+  ALICEBLUE: "#F0F8FF",
+  ANTIQUEWHITE: "#FAEBD7",
+  AQUA: "#00FFFF",
+  AQUAMARINE: "#7FFFD4",
+  AZURE: "#F0FFFF",
+  BEIGE: "#F5F5DC",
+  BISQUE: "#FFE4C4",
+  BLACK: "#000000",
+  BLANCHEDALMOND: "#FFEBCD",
+  BLUE: "#0000FF",
+  BLUEVIOLET: "#8A2BE2",
+  BROWN: "#A52A2A",
+  BURLYWOOD: "#DEB887",
+  CADETBLUE: "#5F9EA0",
+  CHARTREUSE: "#7FFF00",
+  CHOCOLATE: "#D2691E",
+  CORAL: "#FF7F50",
+  CORNFLOWERBLUE: "#6495ED",
+  CORNSILK: "#FFF8DC",
+  CRIMSON: "#DC143C",
+  CYAN: "#00FFFF",
+  DARKBLUE: "#00008B",
+  DARKCYAN: "#008B8B",
+  DARKGOLDENROD: "#B8860B",
+  DARKGRAY: "#A9A9A9",
+  DARKGREEN: "#006400",
+  DARKGREY: "#A9A9A9",
+  DARKKHAKI: "#BDB76B",
+  DARKMAGENTA: "#8B008B",
+  DARKOLIVEGREEN: "#556B2F",
+  DARKORANGE: "#FF8C00",
+  DARKORCHID: "#9932CC",
+  DARKRED: "#8B0000",
+  DARKSALMON: "#E9967A",
+  DARKSEAGREEN: "#8FBC8F",
+  DARKSLATEBLUE: "#483D8B",
+  DARKSLATEGRAY: "#2F4F4F",
+  DARKSLATEGREY: "#2F4F4F",
+  DARKTURQUOISE: "#00CED1",
+  DARKVIOLET: "#9400D3",
+  DEEPPINK: "#FF1493",
+  DEEPSKYBLUE: "#00BFFF",
+  DIMGRAY: "#696969",
+  DIMGREY: "#696969",
+  DODGERBLUE: "#1E90FF",
+  FIREBRICK: "#B22222",
+  FLORALWHITE: "#FFFAF0",
+  FORESTGREEN: "#228B22",
+  FUCHSIA: "#FF00FF",
+  GAINSBORO: "#DCDCDC",
+  GHOSTWHITE: "#F8F8FF",
+  GOLD: "#FFD700",
+  GOLDENROD: "#DAA520",
+  GRAY: "#808080",
+  GREEN: "#008000",
+  GREENYELLOW: "#ADFF2F",
+  GREY: "#808080",
+  HONEYDEW: "#F0FFF0",
+  HOTPINK: "#FF69B4",
+  INDIANRED: "#CD5C5C",
+  INDIGO: "#4B0082",
+  IVORY: "#FFFFF0",
+  KHAKI: "#F0E68C",
+  LAVENDER: "#E6E6FA",
+  LAVENDAR_BLUSH: "#FFF0F5",
+  LAWNGREEN: "#7CFC00",
+  LEMONCHIFFON: "#FFFACD",
+  LIGHTBLUE: "#ADD8E6",
+  LIGHTCORAL: "#F08080",
+  LIGHTCYAN: "#E0FFFF",
+  LIGHTGOLDENRODYELLOW: "#FAFAD2",
+  LIGHTGRAY: "#D3D3D3",
+  LIGHTGREEN: "#90EE90",
+  LIGHTGREY: "#D3D3D3",
+  LIGHTPINK: "#FFB6C1",
+  LIGHTSEAGREEN: "#20B2AA",
+  LIGHTSKYBLUE: "#87CEFA",
+  LIGHTSLATEGRAY: "#778899",
+  LIGHTSLATEGREY: "#778899",
+  LIGHTSTEELBLUE: "#B0C4DE",
+  LIGHTYELLOW: "#FFFFE0",
+  LIME: "#00FF00",
+  LIMEGREEN: "#32CD32",
+  LINEN: "#FAF0E6",
+  MAGENTA: "#FF00FF",
+  MAROON: "#800000",
+  MEDIUMAQUAMARINE: "#66CDAA",
+  MEDIUMBLUE: "#0000CD",
+  MEDIUMORCHID: "#BA55D3",
+  MEDIUMPURPLE: "#9370DB",
+  MEDIUMSEAGREEN: "#3CB371",
+  MEDIUMSLATEBLUE: "#7B68EE",
+  MEDIUMSPRINGGREEN: "#00FA9A",
+  MEDIUMTURQUOISE: "#48D1CC",
+  MEDIUMVIOLETRED: "#C71585",
+  MIDNIGHTBLUE: "#191970",
+  MINTCREAM: "#F5FFFA",
+  MISTYROSE: "#FFE4E1",
+  MOCCASIN: "#FFE4B5",
+  NAVAJOWHITE: "#FFDEAD",
+  NAVY: "#000080",
+  OLDLACE: "#FDF5E6",
+  OLIVE: "#808000",
+  OLIVEDRAB: "#6B8E23",
+  ORANGE: "#FFA500",
+  ORANGERED: "#FF4500",
+  ORCHID: "#DA70D6",
+  PALEGOLDENROD: "#EEE8AA",
+  PALEGREEN: "#98FB98",
+  PALETURQUOISE: "#AFEEEE",
+  PALEVIOLETRED: "#DB7093",
+  PAPAYAWHIP: "#FFEFD5",
+  PEACHPUFF: "#FFDAB9",
+  PERU: "#CD853F",
+  PINK: "#FFC0CB",
+  PLUM: "#DDA0DD",
+  POWDERBLUE: "#B0E0E6",
+  PURPLE: "#800080",
+  RED: "#FF0000",
+  ROSYBROWN: "#BC8F8F",
+  ROYALBLUE: "#4169E1",
+  SADDLEBROWN: "#8B4513",
+  SALMON: "#FA8072",
+  SANDYBROWN: "#F4A460",
+  SEAGREEN: "#2E8B57",
+  SEASHELL: "#FFF5EE",
+  SIENNA: "#A0522D",
+  SILVER: "#C0C0C0",
+  SKYBLUE: "#87CEEB",
+  SLATEBLUE: "#6A5ACD",
+  SLATEGRAY: "#708090",
+  SLATEGREY: "#708090",
+  SNOW: "#FFFAFA",
+  SPRINGGREEN: "#00FF7F",
+  STEELBLUE: "#4682B4",
+  TAN: "#D2B48C",
+  TEAL: "#008080",
+  THISTLE: "#D8BFD8",
+  TOMATO: "#FF6347",
+  TURQUOISE: "#40E0D0",
+  VIOLET: "#EE82EE",
+  WHEAT: "#F5DEB3",
+  WHITE: "#FFFFFF",
+  WHITESMOKE: "#F5F5F5",
+  YELLOW: "#FFFF00",
+  YELLOWGREEN: "#9ACD32",
+};
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/expression.test.ts b/web/src/beta/core/mantle/evaluator/simple/expression/expression.test.ts
new file mode 100644
index 0000000000..e046c6e03d
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/expression.test.ts
@@ -0,0 +1,63 @@
+import jsep from "jsep";
+import { expect, test, describe, beforeEach } from "vitest";
+
+import { Feature } from "../../../types";
+
+import {
+  replaceDefines,
+  removeBackslashes,
+  Expression,
+  EXPRESSION_CACHES,
+  clearExpressionCaches,
+  REPLACED_VARIABLES_CACHE,
+} from "./expression";
+import { createRuntimeAst } from "./runtime";
+
+describe("replaceDefines", () => {
+  test("should replace defined placeholders with the corresponding values in the expression string", () => {
+    const result = replaceDefines("${key}", { key: "value" });
+    expect(result).toBe("(value)");
+  });
+
+  test("should handle multiple defined placeholders in the expression string", () => {
+    const result = replaceDefines("${key1} + ${key2}", {
+      key1: "value1",
+      key2: "value2",
+    });
+    expect(result).toBe("(value1) + (value2)");
+  });
+});
+
+describe("removeBackslashes", () => {
+  test("should remove all backslashes from the expression string", () => {
+    const result = removeBackslashes("\\");
+    expect(result).toBe("@#%");
+  });
+
+  test("should handle multiple backslashes in the expression string", () => {
+    const result = removeBackslashes("\\\\");
+    expect(result).toBe("@#%@#%");
+  });
+});
+
+describe("expression caches", () => {
+  beforeEach(() => {
+    EXPRESSION_CACHES.clear();
+  });
+
+  test("should remove caches", () => {
+    const originalExpression = "${HEIGHT} > 2 ? color('red') : color('blue')";
+    const replacedExpression = "czm_HEIGHT > 2 ? color('red') : color('blue')";
+    const feature = { properties: { HEIGHT: 1 } } as Feature;
+    const expression = new Expression(originalExpression, feature);
+    expect(REPLACED_VARIABLES_CACHE.get(originalExpression)).toEqual([replacedExpression, []]);
+    expect(EXPRESSION_CACHES.get(replacedExpression)).toEqual(
+      createRuntimeAst(expression, jsep(replacedExpression)),
+    );
+
+    clearExpressionCaches(originalExpression, feature, undefined);
+
+    expect(REPLACED_VARIABLES_CACHE.get(originalExpression)).toBeUndefined();
+    expect(EXPRESSION_CACHES.get(replacedExpression)).toBeUndefined();
+  });
+});
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/expression.ts b/web/src/beta/core/mantle/evaluator/simple/expression/expression.ts
new file mode 100644
index 0000000000..9a5edc9057
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/expression.ts
@@ -0,0 +1,105 @@
+import jsep from "jsep";
+
+import { Feature } from "../../../types";
+
+import { backslashRegex, backslashReplacement } from "./constants";
+import { Node } from "./node";
+import { createRuntimeAst } from "./runtime";
+import { replaceVariables, VARIABLE_PREFIX } from "./variableReplacer";
+
+export type JPLiteral = {
+  literalName: string;
+  literalValue: any;
+};
+
+export const EXPRESSION_CACHES = new Map<string, Node | Error>();
+export const REPLACED_VARIABLES_CACHE = new Map<string, [string, JPLiteral[]]>();
+const DEFINE_PLACEHOLDER_REGEX_CACHE = new Map<string, RegExp>();
+
+export class Expression {
+  private _expression: string;
+  private _runtimeAst: Node | Error;
+  private _feature?: Feature;
+
+  constructor(expression: string, feature?: Feature, defines?: any) {
+    this._expression = expression;
+    this._feature = feature;
+    let literalJP: JPLiteral[] = [];
+
+    const cachedReplacedVariables = REPLACED_VARIABLES_CACHE.get(expression);
+    // JSONPath returns simple literal so we can not cache in here
+    if (cachedReplacedVariables) {
+      [expression, literalJP] = cachedReplacedVariables;
+    } else {
+      const originalExpression = expression;
+      expression = replaceDefines(expression, defines);
+      [expression, literalJP] = replaceVariables(
+        removeBackslashes(expression),
+        this._feature?.properties,
+      );
+      if (expression.includes(VARIABLE_PREFIX)) {
+        REPLACED_VARIABLES_CACHE.set(originalExpression, [expression, literalJP]);
+      }
+    }
+
+    const cachedAST = EXPRESSION_CACHES.get(expression);
+    if (cachedAST) {
+      this._runtimeAst = cachedAST;
+    } else {
+      if (literalJP.length !== 0) {
+        for (const elem of literalJP) {
+          jsep.addLiteral(elem.literalName, elem.literalValue);
+        }
+      }
+
+      // customize jsep operators
+      jsep.addBinaryOp("=~", 0);
+      jsep.addBinaryOp("!~", 0);
+
+      let ast;
+      try {
+        ast = jsep(expression);
+      } catch (e) {
+        throw new Error(`failed to generate ast: ${e}`);
+      }
+
+      this._runtimeAst = createRuntimeAst(this, ast);
+      EXPRESSION_CACHES.set(expression, this._runtimeAst);
+    }
+  }
+
+  evaluate() {
+    const value = (this._runtimeAst as Node).evaluate(this._feature);
+    return value;
+  }
+}
+
+export function replaceDefines(expression: string, defines: any): string {
+  if (typeof defines === "undefined") {
+    return expression;
+  }
+  let definePlaceholderRegex = DEFINE_PLACEHOLDER_REGEX_CACHE.get(expression);
+  if (!definePlaceholderRegex) {
+    definePlaceholderRegex = new RegExp(`\\$\\{(${Object.keys(defines).join("|")})\\}`, "g");
+    DEFINE_PLACEHOLDER_REGEX_CACHE.set(expression, definePlaceholderRegex);
+  }
+  return expression.replace(definePlaceholderRegex, (_, key) =>
+    typeof defines[key] !== "undefined" ? `(${defines[key]})` : "",
+  );
+}
+
+export function removeBackslashes(expression: string): string {
+  return expression.replace(backslashRegex, backslashReplacement);
+}
+
+export function clearExpressionCaches(
+  expression: string,
+  feature: Feature | undefined,
+  defines: any | undefined,
+) {
+  REPLACED_VARIABLES_CACHE.delete(expression);
+
+  expression = replaceDefines(expression, defines);
+  [expression] = replaceVariables(removeBackslashes(expression), feature?.properties);
+  EXPRESSION_CACHES.delete(expression);
+}
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/functions/binaryFunctions.ts b/web/src/beta/core/mantle/evaluator/simple/expression/functions/binaryFunctions.ts
new file mode 100644
index 0000000000..52e75dcdaa
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/functions/binaryFunctions.ts
@@ -0,0 +1,34 @@
+type BinaryFunction = (call: string, left: number, right: number) => number;
+
+export function getEvaluateBinaryFunction(call: string): (feature: any) => number {
+  const evaluate = binaryFunctions[call];
+  return function (this: { _left: any; _right: any }, feature: any): number {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+    return evaluate(call, left, right);
+  };
+}
+
+export const binaryFunctions: { [key: string]: BinaryFunction } = {
+  atan2: getEvaluateBinaryComponentwise(Math.atan2, false),
+  pow: getEvaluateBinaryComponentwise(Math.pow, false),
+  min: getEvaluateBinaryComponentwise(Math.min, true),
+  max: getEvaluateBinaryComponentwise(Math.max, true),
+};
+
+function getEvaluateBinaryComponentwise(operation: any, allowScalar: boolean): BinaryFunction {
+  return function (call: any, left: any, right: any) {
+    if (allowScalar && typeof right === "number") {
+      if (typeof left === "number") {
+        return operation(left, right);
+      }
+    }
+    if (typeof left === "number" && typeof right === "number") {
+      return operation(left, right);
+    }
+
+    throw new Error(
+      `Function "${call}" requires vector or number arguments of matching types. Arguments are ${left} and ${right}.`,
+    );
+  };
+}
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/functions/colors.ts b/web/src/beta/core/mantle/evaluator/simple/expression/functions/colors.ts
new file mode 100644
index 0000000000..bd7d5d1012
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/functions/colors.ts
@@ -0,0 +1,189 @@
+import { defaultValue } from "../../../../utils";
+import { rgbaMatcher, rrggbbaaMatcher, builtInColor } from "../constants";
+
+//rgb(), rgba(), or rgb%()
+const rgbParenthesesMatcher =
+  /^rgba?\(\s*([0-9.]+%?)\s*,\s*([0-9.]+%?)\s*,\s*([0-9.]+%?)(?:\s*,\s*([0-9.]+))?\s*\)$/i;
+//hsl() or hsla()
+const hslParenthesesMatcher =
+  /^hsla?\(\s*([0-9.]+)\s*,\s*([0-9.]+%)\s*,\s*([0-9.]+%)(?:\s*,\s*([0-9.]+))?\s*\)$/i;
+
+export class Color {
+  red: number;
+  green: number;
+  blue: number;
+  alpha: number;
+  constructor(red?: number, green?: number, blue?: number, alpha?: number) {
+    this.red = defaultValue(red, 1.0);
+    this.green = defaultValue(green, 1.0);
+    this.blue = defaultValue(blue, 1.0);
+    this.alpha = defaultValue(alpha, 1.0);
+  }
+
+  static byteToFloat(number: number): number {
+    return number / 255.0;
+  }
+  static floatToByte(number: number): number {
+    return number === 1.0 ? 255.0 : (number * 256.0) | 0;
+  }
+
+  static fromCssColorString(color: string): Color | undefined {
+    // Remove all whitespaces from the color string
+    color = color.replace(/\s/g, "");
+
+    const namedColor = getColor(color);
+    if (typeof namedColor !== "undefined") {
+      return namedColor;
+    }
+
+    let matches = rgbaMatcher.exec(color);
+    if (matches !== null) {
+      const result = new Color();
+      result.red = parseInt(matches[1], 16) / 15;
+      result.green = parseInt(matches[2], 16) / 15.0;
+      result.blue = parseInt(matches[3], 16) / 15.0;
+      result.alpha = parseInt(defaultValue(matches[4], "f"), 16) / 15.0;
+      return result;
+    }
+
+    matches = rrggbbaaMatcher.exec(color);
+    if (matches !== null) {
+      const result = new Color();
+      result.red = parseInt(matches[1], 16) / 255.0;
+      result.green = parseInt(matches[2], 16) / 255.0;
+      result.blue = parseInt(matches[3], 16) / 255.0;
+      result.alpha = parseInt(defaultValue(matches[4], "ff"), 16) / 255.0;
+      return result;
+    }
+
+    matches = rgbParenthesesMatcher.exec(color);
+    if (matches !== null) {
+      const result = new Color();
+      result.red = parseFloat(matches[1]) / ("%" === matches[1].substr(-1) ? 100.0 : 255.0);
+      result.green = parseFloat(matches[2]) / ("%" === matches[2].substr(-1) ? 100.0 : 255.0);
+      result.blue = parseFloat(matches[3]) / ("%" === matches[3].substr(-1) ? 100.0 : 255.0);
+      result.alpha = parseFloat(defaultValue(matches[4], "1.0"));
+      return result;
+    }
+
+    matches = hslParenthesesMatcher.exec(color);
+    if (matches !== null) {
+      return Color.fromHsl(
+        parseFloat(matches[1]) / 360.0,
+        parseFloat(matches[2]) / 100.0,
+        parseFloat(matches[3]) / 100.0,
+        parseFloat(defaultValue(matches[4], "1.0")),
+      );
+    }
+    return undefined;
+  }
+
+  static fromHsl(
+    hue?: number,
+    saturation?: number,
+    lightness?: number,
+    alpha?: number,
+  ): Color | undefined {
+    hue = defaultValue(hue, 0.0) % 1.0;
+    saturation = defaultValue(saturation, 0.0);
+    lightness = defaultValue(lightness, 0.0);
+    alpha = defaultValue(alpha, 1.0);
+
+    if (hue && saturation && lightness && alpha) {
+      let red = lightness;
+      let green = lightness;
+      let blue = lightness;
+      const result = new Color();
+
+      if (saturation !== 0) {
+        let m2;
+        if (lightness < 0.5) {
+          m2 = lightness * (1 + saturation);
+        } else {
+          m2 = lightness + saturation - lightness * saturation;
+        }
+
+        const m1 = 2.0 * lightness - m2;
+        red = hue2rgb(m1, m2, hue + 1 / 3);
+        green = hue2rgb(m1, m2, hue);
+        blue = hue2rgb(m1, m2, hue - 1 / 3);
+      }
+
+      if (typeof result === "undefined") {
+        return new Color(red, green, blue, alpha);
+      }
+
+      result.red = red;
+      result.green = green;
+      result.blue = blue;
+      result.alpha = alpha;
+      return result;
+    }
+    return undefined;
+  }
+
+  toCssHexString() {
+    let r = Color.floatToByte(this.red).toString(16);
+    if (r.length < 2) {
+      r = `0${r}`;
+    }
+    let g = Color.floatToByte(this.green).toString(16);
+    if (g.length < 2) {
+      g = `0${g}`;
+    }
+    let b = Color.floatToByte(this.blue).toString(16);
+    if (b.length < 2) {
+      b = `0${b}`;
+    }
+    if (this.alpha < 1) {
+      let hexAlpha = Color.floatToByte(this.alpha).toString(16);
+      if (hexAlpha.length < 2) {
+        hexAlpha = `0${hexAlpha}`;
+      }
+      return `#${r}${g}${b}${hexAlpha}`;
+    }
+    return `#${r}${g}${b}`.toUpperCase();
+  }
+
+  static fromBytes(red: number, green: number, blue: number, alpha: number) {
+    red = this.byteToFloat(defaultValue(red, 255.0));
+    green = Color.byteToFloat(defaultValue(green, 255.0));
+    blue = Color.byteToFloat(defaultValue(blue, 255.0));
+    alpha = Color.byteToFloat(defaultValue(alpha, 255.0));
+
+    return new Color(red, green, blue, alpha);
+  }
+}
+
+function getColor(color: string): Color | undefined {
+  color = color.toUpperCase();
+  if (builtInColor[color]) {
+    return Color.fromCssColorString(builtInColor[color]);
+  }
+
+  switch (color) {
+    case "TRANSPARENT":
+      return new Color(0, 0, 0, 0);
+    default:
+      return undefined;
+  }
+}
+
+function hue2rgb(m1: number, m2: number, h: number): number {
+  if (h < 0) {
+    h += 1;
+  }
+  if (h > 1) {
+    h -= 1;
+  }
+  if (h * 6 < 1) {
+    return m1 + (m2 - m1) * 6 * h;
+  }
+  if (h * 2 < 1) {
+    return m2;
+  }
+  if (h * 3 < 2) {
+    return m1 + (m2 - m1) * (2 / 3 - h) * 6;
+  }
+  return m1;
+}
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/functions/index.ts b/web/src/beta/core/mantle/evaluator/simple/expression/functions/index.ts
new file mode 100644
index 0000000000..1e7711e50c
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/functions/index.ts
@@ -0,0 +1,3 @@
+export { binaryFunctions, getEvaluateBinaryFunction } from "./binaryFunctions";
+export { unaryFunctions, getEvaluateUnaryFunction } from "./unaryFunctions";
+export { Color } from "./colors";
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/functions/unaryFunctions.ts b/web/src/beta/core/mantle/evaluator/simple/expression/functions/unaryFunctions.ts
new file mode 100644
index 0000000000..bca3302bdc
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/functions/unaryFunctions.ts
@@ -0,0 +1,54 @@
+import { Math as CesiumMath } from "cesium";
+
+type UnaryFunction = (call: string, left: number) => number;
+
+export function getEvaluateUnaryFunction(call: string): (feature: any) => number {
+  const evaluate = unaryFunctions[call];
+  return function (this: { _left: any }, feature: any): number {
+    const left = this._left.evaluate(feature);
+    return evaluate(call, left);
+  };
+}
+
+export const unaryFunctions: { [key: string]: UnaryFunction } = {
+  abs: getEvaluateUnaryComponentwise(Math.abs),
+  sqrt: getEvaluateUnaryComponentwise(Math.sqrt),
+  cos: getEvaluateUnaryComponentwise(Math.cos),
+  sin: getEvaluateUnaryComponentwise(Math.sin),
+  tan: getEvaluateUnaryComponentwise(Math.tan),
+  acos: getEvaluateUnaryComponentwise(Math.acos),
+  asin: getEvaluateUnaryComponentwise(Math.asin),
+  atan: getEvaluateUnaryComponentwise(Math.atan),
+  radians: getEvaluateUnaryComponentwise(CesiumMath.toRadians),
+  degrees: getEvaluateUnaryComponentwise(CesiumMath.toDegrees),
+  sign: getEvaluateUnaryComponentwise(CesiumMath.sign),
+  floor: getEvaluateUnaryComponentwise(Math.floor),
+  ceil: getEvaluateUnaryComponentwise(Math.ceil),
+  round: getEvaluateUnaryComponentwise(Math.round),
+  exp2: getEvaluateUnaryComponentwise(exp2),
+  log: getEvaluateUnaryComponentwise(Math.log),
+  log2: getEvaluateUnaryComponentwise(log2),
+  fract: getEvaluateUnaryComponentwise(fract),
+};
+function getEvaluateUnaryComponentwise(operation: (value: number) => number): UnaryFunction {
+  return function (call: any, left: any) {
+    if (typeof left === "number") {
+      return operation(left);
+    }
+    throw new Error(
+      `Function "${call}" requires a vector or number argument. Argument is ${left}.`,
+    );
+  };
+}
+
+function fract(number: number): number {
+  return number - Math.floor(number);
+}
+
+function exp2(exponent: number): number {
+  return Math.pow(2.0, exponent);
+}
+
+function log2(number: number): number {
+  return CesiumMath.log2(number);
+}
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/index.ts b/web/src/beta/core/mantle/evaluator/simple/expression/index.ts
new file mode 100644
index 0000000000..c1d38f1a25
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/index.ts
@@ -0,0 +1 @@
+export { Expression, clearExpressionCaches } from "./expression";
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/node.ts b/web/src/beta/core/mantle/evaluator/simple/expression/node.ts
new file mode 100644
index 0000000000..b58e6d19d4
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/node.ts
@@ -0,0 +1,520 @@
+import { Feature } from "../../../types";
+
+import { ExpressionNodeType } from "./constants";
+import {
+  getEvaluateUnaryFunction,
+  unaryFunctions,
+  getEvaluateBinaryFunction,
+  binaryFunctions,
+  Color,
+} from "./functions";
+
+export class Node {
+  private _type;
+  private _value;
+  private _left;
+  private _right;
+  private _test;
+  evaluate: any;
+
+  constructor(type: any, value: any, left?: any, right?: any, test?: any) {
+    this._type = type;
+    this._value = value;
+    this._left = left;
+    this._right = right;
+    this._test = test;
+
+    this.setEvaluateFunction();
+  }
+
+  setEvaluateFunction() {
+    const type = this._type;
+    const value = this._value;
+
+    switch (type) {
+      case ExpressionNodeType.CONDITIONAL:
+        this.evaluate = this._evaluateConditional;
+        break;
+
+      case ExpressionNodeType.FUNCTION_CALL:
+        switch (value) {
+          case "toString":
+            this.evaluate = this._evaluateToString;
+            break;
+        }
+        break;
+
+      case ExpressionNodeType.UNARY:
+        switch (value) {
+          case "!":
+            this.evaluate = this._evaluateNot;
+            break;
+          case "-":
+            this.evaluate = this._evaluateNegative;
+            break;
+          case "+":
+            this.evaluate = this._evaluatePositive;
+            break;
+          case "isNaN":
+            this.evaluate = this._evaluateNaN;
+            break;
+          case "isFinite":
+            this.evaluate = this._evaluateIsFinite;
+            break;
+          case "Boolean":
+            this.evaluate = this._evaluateBooleanConversion;
+            break;
+          case "Number":
+            this.evaluate = this._evaluateNumberConversion;
+            break;
+          case "String":
+            this.evaluate = this._evaluateStringConversion;
+            break;
+          default:
+            if (typeof unaryFunctions[value as string] !== "undefined") {
+              this.evaluate = getEvaluateUnaryFunction(value);
+            }
+            break;
+        }
+        break;
+
+      case ExpressionNodeType.BINARY:
+        switch (value) {
+          case "+":
+            this.evaluate = this._evaluatePlus;
+            break;
+          case "-":
+            this.evaluate = this._evaluateMinus;
+            break;
+          case "*":
+            this.evaluate = this._evaluateTimes;
+            break;
+          case "/":
+            this.evaluate = this._evaluateDivide;
+            break;
+          case "%":
+            this.evaluate = this._evaluateMod;
+            break;
+          case "===":
+            this.evaluate = this._evaluateEqualsStrict;
+            break;
+          case "!==":
+            this.evaluate = this._evaluateNotEqualsStrict;
+            break;
+          case "<":
+            this.evaluate = this._evaluateLessThan;
+            break;
+          case "<=":
+            this.evaluate = this._evaluateLessThanOrEquals;
+            break;
+          case ">":
+            this.evaluate = this._evaluateGreaterThan;
+            break;
+          case ">=":
+            this.evaluate = this._evaluateGreaterThanOrEquals;
+            break;
+          case "&&":
+            this.evaluate = this._evaluateAnd;
+            break;
+          case "||":
+            this.evaluate = this._evaluateOr;
+            break;
+          default:
+            if (typeof binaryFunctions[value] !== "undefined") {
+              this.evaluate = getEvaluateBinaryFunction(value);
+            }
+            break;
+        }
+        break;
+
+      case ExpressionNodeType.MEMBER:
+        if (value === "brackets") {
+          this.evaluate = this._evaluateMemberBrackets;
+        } else {
+          this.evaluate = this._evaluateMemberDot;
+        }
+        break;
+
+      case ExpressionNodeType.ARRAY:
+        this.evaluate = this._evaluateArray;
+        break;
+
+      case ExpressionNodeType.VARIABLE:
+        this.evaluate = this._evaluateVariable;
+        break;
+
+      case ExpressionNodeType.VARIABLE_IN_STRING:
+        this.evaluate = this._evaluateVariableString;
+        break;
+
+      case ExpressionNodeType.LITERAL_COLOR:
+        this.evaluate = this._evaluateLiteralColor;
+        break;
+
+      case ExpressionNodeType.LITERAL_STRING:
+        this.evaluate = this._evaluateLiteralString;
+        break;
+
+      default:
+        this.evaluate = this._evaluateLiteral;
+        break;
+    }
+  }
+
+  _evaluateLiteral() {
+    return this._value;
+  }
+  _evaluateLiteralString() {
+    return this._value;
+  }
+  _evaluateVariableString(feature?: Feature) {
+    const variableRegex = /\${(.*?)}/g;
+    let result = this._value;
+    let match = variableRegex.exec(result);
+    while (match !== null) {
+      const placeholder = match[0];
+      const variableName = match[1];
+      let property = feature?.properties[variableName];
+      if (typeof property === "undefined") {
+        property = "";
+      }
+      result = result.replace(placeholder, property);
+      match = variableRegex.exec(result);
+    }
+    return result;
+  }
+  _evaluateVariable(feature?: Feature) {
+    let property;
+    if (feature && String(this._value) in feature.properties) {
+      property = feature.properties[String(this._value)];
+    } else if (String(this._value) === "id") {
+      property = feature?.id;
+    }
+    if (typeof property === "undefined") {
+      property = "";
+    }
+    return property;
+  }
+  _evaluateMemberDot(feature?: Feature) {
+    if (checkFeature(this._left)) {
+      return feature?.properties[this._right.evaluate(feature)];
+    }
+    const property = this._left.evaluate(feature);
+    if (typeof property === "undefined") {
+      return undefined;
+    }
+
+    const member = this._right.evaluate(feature);
+    return property[member];
+  }
+
+  _evaluateMemberBrackets(feature?: Feature) {
+    if (checkFeature(this._left)) {
+      return feature?.properties[this._right.evaluate(feature)];
+    }
+    const property = this._left.evaluate(feature);
+    if (typeof property === "undefined") {
+      return undefined;
+    }
+
+    const member = this._right.evaluate(feature);
+    return property[member];
+  }
+  _evaluateArray(feature?: Feature) {
+    const array = [];
+    for (let i = 0; i < this._value.length; i++) {
+      array[i] = this._value[i].evaluate(feature);
+    }
+    return array;
+  }
+
+  _evaluateNot(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    if (typeof left !== "boolean") {
+      throw new Error(`Operator "!" requires a boolean argument. Argument is ${left}.`);
+    }
+    return !left;
+  }
+  _evaluateNegative(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    if (typeof left === "number") {
+      return -left;
+    }
+
+    throw new Error(`Operator "-" requires a vector or number argument. Argument is ${left}.`);
+  }
+  _evaluatePositive(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+
+    if (!(typeof left === "number")) {
+      throw new Error(`Operator "+" requires a vector or number argument. Argument is ${left}.`);
+    }
+
+    return left;
+  }
+  _evaluateLessThan(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+
+    if (typeof left !== "number" || typeof right !== "number") {
+      console.warn(`Operator "<" requires number arguments. Arguments are ${left} and ${right}.`);
+      return false;
+    }
+
+    return left < right;
+  }
+  _evaluateLessThanOrEquals(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+
+    if (typeof left !== "number" || typeof right !== "number") {
+      console.warn(`Operator "<=" requires number arguments. Arguments are ${left} and ${right}.`);
+      return false;
+    }
+
+    return left <= right;
+  }
+  _evaluateGreaterThan(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+
+    if (typeof left !== "number" || typeof right !== "number") {
+      console.warn(`Operator ">" requires number arguments. Arguments are ${left} and ${right}.`);
+      return false;
+    }
+
+    return left > right;
+  }
+  _evaluateGreaterThanOrEquals(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+
+    if (typeof left !== "number" || typeof right !== "number") {
+      console.warn(`Operator ">=" requires number arguments. Arguments are ${left} and ${right}.`);
+      return false;
+    }
+
+    return left >= right;
+  }
+  _evaluateOr(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    if (typeof left !== "boolean") {
+      console.warn(`Operator "||" requires boolean arguments. First argument is ${left}.`);
+      return false;
+    }
+
+    // short circuit the expression
+    if (left) {
+      return true;
+    }
+
+    const right = this._right.evaluate(feature);
+    if (typeof right !== "boolean") {
+      console.warn(`Operator "||" requires boolean arguments. Second argument is ${right}.`);
+      return false;
+    }
+
+    return left || right;
+  }
+  _evaluateAnd(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    if (typeof left !== "boolean") {
+      console.warn(`Operator "&&" requires boolean arguments. First argument is ${left}.`);
+      return false;
+    }
+
+    // short circuit the expression
+    if (!left) {
+      return false;
+    }
+
+    const right = this._right.evaluate(feature);
+    if (typeof right !== "boolean") {
+      console.warn(`Operator "&&" requires boolean arguments. Second argument is ${right}.`);
+      return false;
+    }
+
+    return left && right;
+  }
+  _evaluatePlus(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+    if (typeof left === "number" && typeof right === "number") {
+      return left + right;
+    }
+
+    throw new Error(
+      `Operator "+" requires vector or number arguments of matching types, or at least one string argument. Arguments are ${left} and ${right}.`,
+    );
+  }
+  _evaluateMinus(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+    if (typeof left === "number" && typeof right === "number") {
+      return left - right;
+    }
+
+    throw new Error(
+      `Operator "-" requires vector or number arguments of matching types. Arguments are ${left} and ${right}.`,
+    );
+  }
+  _evaluateTimes(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+    if (typeof left === "number" && typeof right === "number") {
+      return left * right;
+    }
+
+    throw new Error(
+      `Operator "*" requires vector or number arguments. If both arguments are vectors they must be matching types. Arguments are ${left} and ${right}.`,
+    );
+  }
+  _evaluateDivide(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+    if (typeof left === "number" && typeof right === "number") {
+      return left / right;
+    }
+
+    throw new Error(
+      `Operator "/" requires vector or number arguments of matching types, or a number as the second argument. Arguments are ${left} and ${right}.`,
+    );
+  }
+  _evaluateMod(feature?: Feature) {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+    if (typeof left === "number" && typeof right === "number") {
+      return left % right;
+    }
+
+    throw new Error(
+      `Operator "%" requires vector or number arguments of matching types. Arguments are ${left} and ${right}.`,
+    );
+  }
+  _evaluateEqualsStrict(feature?: Feature): boolean {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+
+    return left === right;
+  }
+  _evaluateNotEqualsStrict(feature?: Feature): boolean {
+    const left = this._left.evaluate(feature);
+    const right = this._right.evaluate(feature);
+
+    return left !== right;
+  }
+  _evaluateConditional(feature?: Feature) {
+    const test = this._test.evaluate(feature);
+
+    if (typeof test !== "boolean") {
+      throw new Error(
+        `Conditional argument of conditional expression must be a boolean. Argument is ${test}.`,
+      );
+    }
+
+    if (test) {
+      return this._left.evaluate(feature);
+    }
+    return this._right.evaluate(feature);
+  }
+  _evaluateNaN(feature?: Feature): boolean {
+    return isNaN(this._left.evaluate(feature));
+  }
+  _evaluateIsFinite(feature?: Feature): boolean {
+    return isFinite(this._left.evaluate(feature));
+  }
+
+  _evaluateBooleanConversion(feature?: Feature): boolean {
+    return Boolean(this._left.evaluate(feature));
+  }
+  _evaluateNumberConversion(feature?: Feature): number {
+    const cleanedNumberInput = cleanseNumberStringInput(this._left.evaluate(feature));
+    return Number(cleanedNumberInput);
+  }
+  _evaluateStringConversion(feature?: Feature): string {
+    return String(this._left.evaluate(feature));
+  }
+  _evaluateToString(feature?: Feature): string | Error {
+    const left = this._left.evaluate(feature);
+    if (left instanceof RegExp) {
+      return String(left);
+    }
+    throw new Error(`Unexpected function call "${this._value}".`);
+  }
+
+  _evaluateLiteralColor(feature?: Feature) {
+    const args = this._left;
+    let color = new Color();
+    if (this._value === "color") {
+      if (typeof args === "undefined") {
+        color = Color.fromBytes(255, 255, 255, 255);
+      } else if (args.length > 1) {
+        const temp = Color.fromCssColorString(args[0].evaluate(feature));
+        if (temp) {
+          color = temp;
+        } else {
+          throw new Error(`wrong literalColor call "${this._value}, ${args}}"`);
+        }
+        color.alpha = args[1].evaluate(feature);
+      } else {
+        const temp = Color.fromCssColorString(args[0].evaluate(feature));
+        if (temp) {
+          color = temp;
+        } else {
+          throw new Error(`wrong literalColor call "${this._value}, ${args}}"`);
+        }
+      }
+    } else if (this._value === "rgb") {
+      color = Color.fromBytes(
+        args[0].evaluate(feature),
+        args[1].evaluate(feature),
+        args[2].evaluate(feature),
+        255,
+      );
+    } else if (this._value === "rgba") {
+      // convert between css alpha (0 to 1) and cesium alpha (0 to 255)
+      const a = args[3].evaluate(feature) * 255;
+      color = Color.fromBytes(
+        args[0].evaluate(feature),
+        args[1].evaluate(feature),
+        args[2].evaluate(feature),
+        a,
+      );
+    } else if (this._value === "hsl") {
+      const hsl = Color.fromHsl(
+        args[0].evaluate(feature),
+        args[1].evaluate(feature),
+        args[2].evaluate(feature),
+        1.0,
+      );
+      if (hsl) color = hsl;
+    } else if (this._value === "hsla") {
+      const hsl = Color.fromHsl(
+        args[0].evaluate(feature),
+        args[1].evaluate(feature),
+        args[2].evaluate(feature),
+        args[3].evaluate(feature),
+      );
+      if (hsl) color = hsl;
+    }
+    return color.toCssHexString();
+  }
+}
+
+function cleanseNumberStringInput(input: any): any {
+  if (typeof input !== "string") return input;
+
+  const reservedWords = ["%"]; // add more reserved words if needed
+
+  for (const word of reservedWords) {
+    if (input.endsWith(word)) {
+      return input.slice(0, -word.length).trim();
+    }
+  }
+
+  return input.trim();
+}
+
+function checkFeature(ast: any): boolean {
+  return ast._value === "feature";
+}
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/runtime.ts b/web/src/beta/core/mantle/evaluator/simple/expression/runtime.ts
new file mode 100644
index 0000000000..976d1c1bf4
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/runtime.ts
@@ -0,0 +1,264 @@
+import { ExpressionNodeType, unaryOperators, binaryOperators, replacementRegex } from "./constants";
+import { Expression } from "./expression";
+import { unaryFunctions, binaryFunctions } from "./functions";
+import { Node } from "./node";
+import { restoreReservedWord, VARIABLE_PREFIX } from "./variableReplacer";
+
+const UNARY_OPERATORS_SET = new Set(unaryOperators);
+const BINARY_OPERATORS_SET = new Set(binaryOperators);
+
+export function createRuntimeAst(expression: Expression, ast: any): Node | Error {
+  let node: Node | Error = new Error("failed to parse");
+
+  const type = ast.type;
+
+  if (type === "Literal") {
+    node = parseLiteral(ast);
+  } else if (type === "CallExpression") {
+    node = parseCall(expression, ast);
+  } else if (type === "Identifier") {
+    node = parseKeywordsAndVariables(ast);
+  } else if (type === "UnaryExpression") {
+    const op = ast.operator;
+    const child = createRuntimeAst(expression, ast.argument);
+    if (UNARY_OPERATORS_SET.has(op)) {
+      node = new Node(ExpressionNodeType.UNARY, op, child);
+    } else {
+      throw new Error(`Unexpected operator "${op}".`);
+    }
+  } else if (type === "BinaryExpression") {
+    const op = ast.operator;
+    const left = createRuntimeAst(expression, ast.left);
+    const right = createRuntimeAst(expression, ast.right);
+    if (BINARY_OPERATORS_SET.has(op)) {
+      node = new Node(ExpressionNodeType.BINARY, op, left, right);
+    } else {
+      throw new Error(`Unexpected operator "${op}".`);
+    }
+  } else if (type === "LogicalExpression") {
+    const op = ast.operator;
+    const left = createRuntimeAst(expression, ast.left);
+    const right = createRuntimeAst(expression, ast.right);
+    if (BINARY_OPERATORS_SET.has(op)) {
+      node = new Node(ExpressionNodeType.BINARY, op, left, right);
+    }
+  } else if (type === "ConditionalExpression") {
+    const test = createRuntimeAst(expression, ast.test);
+    const left = createRuntimeAst(expression, ast.consequent);
+    const right = createRuntimeAst(expression, ast.alternate);
+    node = new Node(ExpressionNodeType.CONDITIONAL, "?", left, right, test);
+  } else if (type === "MemberExpression") {
+    node = parseMemberExpression(expression, ast);
+  } else if (type === "ArrayExpression") {
+    const val = [];
+    for (let i = 0; i < ast.elements.length; i++) {
+      val[i] = createRuntimeAst(expression, ast.elements[i]);
+    }
+    node = new Node(ExpressionNodeType.ARRAY, val);
+  } else if (type === "Compound") {
+    // empty expression or multiple expressions
+    throw new Error("Provide exactly one expression.");
+  } else {
+    throw new Error("Cannot parse expression.");
+  }
+
+  return node;
+}
+
+function parseLiteral(ast: any): Node | Error {
+  const type = typeof ast.value;
+  if (ast.value === null) {
+    return new Node(ExpressionNodeType.LITERAL_NULL, null);
+  } else if (type === "boolean") {
+    return new Node(ExpressionNodeType.LITERAL_BOOLEAN, ast.value);
+  } else if (type === "number") {
+    return new Node(ExpressionNodeType.LITERAL_NUMBER, ast.value);
+  } else if (type === "string") {
+    if (ast.value.indexOf("${") >= 0) {
+      return new Node(ExpressionNodeType.VARIABLE_IN_STRING, ast.value);
+    }
+    // } else if (rgbaMatcher.exec(ast.value) || rrggbbaaMatcher.exec(ast.value)) {
+    //   const val = new Node(ExpressionNodeType.LITERAL_STRING, replaceBackslashes(ast.value));
+    //   return new Node(ExpressionNodeType.LITERAL_COLOR, "color", [val]);
+    // }
+    return new Node(ExpressionNodeType.LITERAL_STRING, replaceBackslashes(ast.value));
+  }
+
+  throw new Error(`${ast} is not a function.`);
+}
+
+export function replaceBackslashes(expression: string): string {
+  return expression.replace(replacementRegex, "\\");
+}
+
+function parseCall(expression: Expression, ast: any): Node | Error {
+  const args = ast.arguments;
+  const argsLength = args.length;
+
+  // Member function calls
+  if (ast.callee.type === "MemberExpression") {
+    const call = ast.callee.property.name;
+    const object = ast.callee.object;
+    if (call === "test" || call === "exec") {
+      // Make sure this is called on a valid type
+      if (object.callee.name !== "regExp") {
+        throw new Error(`${call} is not a function.`);
+      }
+      if (argsLength === 0) {
+        if (call === "test") {
+          return new Node(ExpressionNodeType.LITERAL_BOOLEAN, false);
+        }
+        return new Node(ExpressionNodeType.LITERAL_NULL, null);
+      }
+      const left = createRuntimeAst(expression, object);
+      const right = createRuntimeAst(expression, args[0]);
+      return new Node(ExpressionNodeType.FUNCTION_CALL, call, left, right);
+    } else if (call === "toString") {
+      const val = createRuntimeAst(expression, object);
+      return new Node(ExpressionNodeType.FUNCTION_CALL, call, val);
+    }
+
+    throw new Error(`Unexpected function call "${call}".`);
+  }
+
+  // Non-member function calls
+  const call = ast.callee.name;
+  if (call === "color") {
+    if (argsLength === 0) {
+      return new Node(ExpressionNodeType.LITERAL_COLOR, call);
+    }
+    const val = createRuntimeAst(expression, args[0]);
+    if (typeof args[1] !== "undefined") {
+      const alpha = createRuntimeAst(expression, args[1]);
+      return new Node(ExpressionNodeType.LITERAL_COLOR, call, [val, alpha]);
+    }
+    return new Node(ExpressionNodeType.LITERAL_COLOR, call, [val]);
+  } else if (call === "rgb" || call === "hsl") {
+    if (argsLength < 3) {
+      throw new Error(`${call} requires three arguments.`);
+    }
+    const val = [
+      createRuntimeAst(expression, args[0]),
+      createRuntimeAst(expression, args[1]),
+      createRuntimeAst(expression, args[2]),
+    ];
+    return new Node(ExpressionNodeType.LITERAL_COLOR, call, val);
+  } else if (call === "rgba" || call === "hsla") {
+    if (argsLength < 4) {
+      throw new Error(`${call} requires four arguments.`);
+    }
+    const val = [
+      createRuntimeAst(expression, args[0]),
+      createRuntimeAst(expression, args[1]),
+      createRuntimeAst(expression, args[2]),
+      createRuntimeAst(expression, args[3]),
+    ];
+    return new Node(ExpressionNodeType.LITERAL_COLOR, call, val);
+  } else if (call === "isNaN" || call === "isFinite") {
+    if (argsLength === 0) {
+      if (call === "isNaN") {
+        return new Node(ExpressionNodeType.LITERAL_BOOLEAN, true);
+      }
+      return new Node(ExpressionNodeType.LITERAL_BOOLEAN, false);
+    }
+    const val = createRuntimeAst(expression, args[0]);
+    return new Node(ExpressionNodeType.UNARY, call, val);
+  } else if (typeof unaryFunctions[call] !== "undefined") {
+    if (argsLength !== 1) {
+      throw new Error(`${call} requires exactly one argument.`);
+    }
+    const val = createRuntimeAst(expression, args[0]);
+    return new Node(ExpressionNodeType.UNARY, call, val);
+  } else if (typeof binaryFunctions[call] !== "undefined") {
+    if (argsLength !== 2) {
+      throw new Error(`${call} requires exactly two arguments.`);
+    }
+    const left = createRuntimeAst(expression, args[0]);
+    const right = createRuntimeAst(expression, args[1]);
+    return new Node(ExpressionNodeType.BINARY, call, left, right);
+  } else if (call === "Boolean") {
+    if (argsLength === 0) {
+      return new Node(ExpressionNodeType.LITERAL_BOOLEAN, false);
+    }
+    const val = createRuntimeAst(expression, args[0]);
+    return new Node(ExpressionNodeType.UNARY, call, val);
+  } else if (call === "Number") {
+    if (argsLength === 0) {
+      return new Node(ExpressionNodeType.LITERAL_NUMBER, 0);
+    }
+    const val = createRuntimeAst(expression, args[0]);
+    return new Node(ExpressionNodeType.UNARY, call, val);
+  } else if (call === "String") {
+    if (argsLength === 0) {
+      return new Node(ExpressionNodeType.LITERAL_STRING, "");
+    }
+    const val = createRuntimeAst(expression, args[0]);
+    return new Node(ExpressionNodeType.UNARY, call, val);
+  }
+
+  throw new Error(`Unexpected function call "${call}".`);
+}
+
+function parseKeywordsAndVariables(ast: any): Node | Error {
+  const name = ast.name;
+  if (isVariable(name)) {
+    const propName = getPropertyName(name);
+    if (propName.substring(0, 8) === "tiles3d_") {
+      return new Node(ExpressionNodeType.BUILTIN_VARIABLE, propName);
+    }
+    return new Node(ExpressionNodeType.VARIABLE, propName);
+  } else if (name === "NaN") {
+    return new Node(ExpressionNodeType.LITERAL_NUMBER, NaN);
+  } else if (name === "Infinity") {
+    return new Node(ExpressionNodeType.LITERAL_NUMBER, Infinity);
+  } else if (name === "undefined") {
+    return new Node(ExpressionNodeType.LITERAL_UNDEFINED, undefined);
+  }
+
+  throw new Error(`${name} is not defined.`);
+}
+
+function parseMathConstant(ast: any) {
+  const name = ast.property.name;
+  if (name === "PI") {
+    return new Node(ExpressionNodeType.LITERAL_NUMBER, Math.PI);
+  } else if (name === "E") {
+    return new Node(ExpressionNodeType.LITERAL_NUMBER, Math.E);
+  }
+
+  throw new Error(`${name} Math Constant is not supported at the moment`);
+}
+
+function parseNumberConstant(ast: any) {
+  const name = ast.property.name;
+  if (name === "POSITIVE_INFINITY") {
+    return new Node(ExpressionNodeType.LITERAL_NUMBER, Number.POSITIVE_INFINITY);
+  }
+  throw new Error(`${name} Number Constant is not supported at the moment`);
+}
+
+function parseMemberExpression(expression: Expression, ast: any) {
+  if (ast.object.name === "Math") {
+    return parseMathConstant(ast);
+  } else if (ast.object.name === "Number") {
+    return parseNumberConstant(ast);
+  }
+
+  let val;
+  const obj = createRuntimeAst(expression, ast.object);
+  if (ast.computed) {
+    val = createRuntimeAst(expression, ast.property);
+    return new Node(ExpressionNodeType.MEMBER, "brackets", obj, val);
+  }
+
+  val = new Node(ExpressionNodeType.LITERAL_STRING, ast.property.name);
+  return new Node(ExpressionNodeType.MEMBER, "dot", obj, val);
+}
+
+function isVariable(name: string): boolean {
+  return name.substring(0, 4) === VARIABLE_PREFIX;
+}
+
+function getPropertyName(variable: string): string {
+  return restoreReservedWord(variable).substring(4);
+}
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/utils.ts b/web/src/beta/core/mantle/evaluator/simple/expression/utils.ts
new file mode 100644
index 0000000000..6a22862b45
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/utils.ts
@@ -0,0 +1,8 @@
+const usableChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+
+export const generateRandomString = (len: number): string => {
+  return Array.from(window.crypto.getRandomValues(new Uint8Array(len)))
+    .map(n => usableChars[n % len])
+    .join("")
+    .toLowerCase();
+};
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/variableReplacer.test.ts b/web/src/beta/core/mantle/evaluator/simple/expression/variableReplacer.test.ts
new file mode 100644
index 0000000000..acbc9ad330
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/variableReplacer.test.ts
@@ -0,0 +1,54 @@
+import { describe, test, expect } from "vitest";
+
+import { replaceVariables } from "./variableReplacer";
+
+describe("replaceVariables", () => {
+  test("should replace the variable placeholders with the corresponding variable names in the expression string", () => {
+    const [result, _] = replaceVariables("${variable}");
+    expect(result).toBe("czm_variable");
+  });
+
+  test("should handle multiple variable placeholders in the expression string", () => {
+    const [result, _] = replaceVariables("${variable1} + ${variable2}");
+    expect(result).toBe("czm_variable1 + czm_variable2");
+  });
+
+  test("should handle JSONPath palceholders in the expression string", () => {
+    const [, res] = replaceVariables("${$.phoneNumbers[:1].type}", {
+      id: "blah",
+      firstName: "John",
+      lastName: "doe",
+      age: 26,
+      address: {
+        streetAddress: "naist street",
+        city: "Nara",
+        postalCode: "630-0192",
+      },
+      phoneNumbers: [
+        {
+          type: "iPhone",
+          number: "0123-4567-8888",
+        },
+        {
+          type: "home",
+          number: "0123-4567-8910",
+        },
+      ],
+    });
+    expect(res[0].literalValue).toBe("iPhone");
+  });
+
+  test("should replace reserved word", () => {
+    const [result, _] = replaceVariables(
+      "${va[ria]ble} + ${variable[0]} + ${variable['key']} + ${variable[\"key\"]} + ${variable[variable]} + ${variable[variable].nested} + ${variable[variable]['nested']}",
+    );
+    expect(result).toBe(
+      `czm_va$reearth_opened_square_bracket_$ria$reearth_closed_square_bracket_$ble + czm_variable[0] + czm_variable['key'] + czm_variable["key"] + czm_variable[variable] + czm_variable[variable].nested + czm_variable[variable]['nested']`,
+    );
+  });
+
+  test("should replace reserved hyphen", () => {
+    const [result, _] = replaceVariables("${vari-able}");
+    expect(result).toBe(`czm_vari$reearth_hyphen_$able`);
+  });
+});
diff --git a/web/src/beta/core/mantle/evaluator/simple/expression/variableReplacer.ts b/web/src/beta/core/mantle/evaluator/simple/expression/variableReplacer.ts
new file mode 100644
index 0000000000..9135ead911
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/expression/variableReplacer.ts
@@ -0,0 +1,117 @@
+import { JSONPath } from "jsonpath-plus";
+
+import { JPLiteral } from "./expression";
+import { generateRandomString } from "./utils";
+
+export const VARIABLE_PREFIX = "czm_";
+
+export function replaceVariables(expression: string, feature?: any): [string, JPLiteral[]] {
+  let exp = expression;
+  let result = "";
+  const literalJP: JPLiteral[] = [];
+  let i = exp.indexOf("${");
+  const featureDefined = typeof feature !== "undefined";
+  const jsonPathCache: Record<string, any[]> = {};
+  const varExpRegex = /^\$./;
+  while (i >= 0) {
+    if (isInsideQuotes(exp, i)) {
+      const closeQuote = findCloseQuote(exp, i);
+      result += exp.slice(0, closeQuote + 1);
+      exp = exp.slice(closeQuote + 1);
+      i = exp.indexOf("${");
+    } else {
+      result += exp.slice(0, i);
+      const j = getCloseBracketIndex(exp, i);
+      const varExp = exp.slice(i + 2, j);
+      if (varExpRegex.test(varExp)) {
+        if (!featureDefined) {
+          return [result, []];
+        }
+        let res = jsonPathCache[varExp];
+        if (!res) {
+          try {
+            res = JSONPath({ json: feature, path: varExp });
+            jsonPathCache[varExp] = res;
+          } catch (error) {
+            return [result, []];
+          }
+        }
+        if (res.length !== 0) {
+          const placeholderLiteral = generateRandomString(10);
+          literalJP.push({
+            literalName: placeholderLiteral,
+            literalValue: res[0],
+          });
+          result += placeholderLiteral;
+        } else {
+          return ["false", []];
+        }
+      } else {
+        const replacedVarExp = replaceReservedWord(varExp);
+        result += `${VARIABLE_PREFIX}${replacedVarExp}`;
+      }
+      exp = exp.slice(j + 1);
+      i = exp.indexOf("${");
+    }
+  }
+  result += exp;
+  return [result, literalJP];
+}
+
+function isInsideQuotes(exp: string, index: number): boolean {
+  const openSingleQuote = exp.indexOf("'");
+  const openDoubleQuote = exp.indexOf('"');
+  if (openSingleQuote >= 0 && openSingleQuote < index) {
+    const closeQuote = exp.indexOf("'", openSingleQuote + 1);
+    return closeQuote >= index;
+  } else if (openDoubleQuote >= 0 && openDoubleQuote < index) {
+    const closeQuote = exp.indexOf('"', openDoubleQuote + 1);
+    return closeQuote >= index;
+  }
+  return false;
+}
+
+function findCloseQuote(exp: string, index: number): number {
+  const openSingleQuote = exp.indexOf("'");
+  const openDoubleQuote = exp.indexOf('"');
+
+  if (openSingleQuote >= 0 && openSingleQuote < index) {
+    return exp.indexOf("'", openSingleQuote + 1);
+  } else if (openDoubleQuote >= 0 && openDoubleQuote < index) {
+    return exp.indexOf('"', openDoubleQuote + 1);
+  }
+
+  return -1;
+}
+
+function getCloseBracketIndex(exp: string, openBracketIndex: number): number {
+  const j = exp.indexOf("}", openBracketIndex);
+  if (j < 0) {
+    throw new Error(`replaceVariable: Unmatched {.`);
+  }
+  return j;
+}
+
+const makeReservedWord = (str: string) => `$reearth_${str}_$`;
+const RESERVED_WORDS: Record<string, string> = {
+  "[": makeReservedWord("opened_square_bracket"),
+  "]": makeReservedWord("closed_square_bracket"),
+  "{": makeReservedWord("opened_curly_bracket"),
+  "}": makeReservedWord("closed_curly_bracket"),
+  "(": makeReservedWord("opened_parentheses"),
+  ")": makeReservedWord("closed_parentheses"),
+  "-": makeReservedWord("hyphen"),
+};
+
+const replaceReservedWord = (word: string) => {
+  const wordFiltered = word.replace(/-/g, RESERVED_WORDS["-"]);
+  if (!/(\]|\)|\})[^[.]+$/.test(wordFiltered)) {
+    return wordFiltered;
+  }
+  return Object.entries(RESERVED_WORDS).reduce((res, [key, val]) => {
+    return res.replaceAll(key, val);
+  }, wordFiltered);
+};
+
+export const restoreReservedWord = (text: string) =>
+  Object.entries(RESERVED_WORDS).reduce((res, [key, val]) => res.replaceAll(val, key), text);
diff --git a/web/src/beta/core/mantle/evaluator/simple/index.test.ts b/web/src/beta/core/mantle/evaluator/simple/index.test.ts
new file mode 100644
index 0000000000..e1ee8094b7
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/index.test.ts
@@ -0,0 +1,535 @@
+import { expect, test, describe } from "vitest";
+
+import { evalLayerAppearances, evalSimpleLayer } from ".";
+
+describe("evalSimpleLayer", () => {
+  test("functionality test", async () => {
+    expect(
+      await evalSimpleLayer(
+        {
+          id: "x",
+          type: "simple",
+          data: {
+            type: "geojson",
+          },
+          marker: {
+            pointColor: "#FF0000",
+            pointSize: { expression: { conditions: [["true", "1"]] } },
+          },
+          properties: {},
+        },
+        {
+          getAllFeatures: async () => [{ type: "feature", id: "a" }],
+          getFeatures: async () => undefined,
+        },
+      ),
+    ).toEqual({
+      layer: {
+        marker: {
+          pointColor: "#FF0000",
+          pointSize: 1,
+        },
+      },
+      features: [
+        {
+          type: "computedFeature",
+          id: "a",
+          marker: {
+            pointColor: "#FF0000",
+            pointSize: 1,
+          },
+        },
+      ],
+    });
+  });
+
+  test("evaluate json properties", async () => {
+    expect(
+      await evalSimpleLayer(
+        {
+          id: "x",
+          type: "simple",
+          data: {
+            type: "geojson",
+            jsonProperties: ["key1", "key2"],
+          },
+          properties: {},
+        },
+        {
+          getAllFeatures: async () => [
+            {
+              type: "feature",
+              id: "a",
+            },
+            {
+              type: "feature",
+              id: "b",
+              properties: {
+                key1: `["hoge", "fuga"]`,
+                key2: "abc",
+              },
+            },
+          ],
+          getFeatures: async () => undefined,
+        },
+      ),
+    ).toEqual({
+      layer: {},
+      features: [
+        {
+          type: "computedFeature",
+          id: "a",
+        },
+        {
+          type: "computedFeature",
+          id: "b",
+          properties: {
+            key1: ["hoge", "fuga"],
+            key2: "abc",
+          },
+        },
+      ],
+    });
+  });
+});
+
+describe("Conditional styling", () => {
+  test("conditions with variables from properties, members and Strictly Equals", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointColor: "#FF0000",
+            pointSize: {
+              expression: {
+                conditions: [
+                  ["${id} === '2432432'", "2"],
+                  ["true", "1"],
+                ],
+              },
+            },
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+        },
+        {
+          type: "feature",
+          id: "1233",
+          properties: {
+            id: "2432432",
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: "#FF0000",
+        pointSize: 2,
+      },
+    });
+  });
+
+  test("conditions with variables from feature, members and Strictly Equals", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointColor: "#FF0000",
+            pointSize: {
+              expression: {
+                conditions: [
+                  ["${id} === '1233'", "4232"],
+                  ["true", "1"],
+                ],
+              },
+            },
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+        },
+        {
+          type: "feature",
+          id: "1233",
+          properties: {
+            foo: "122",
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: "#FF0000",
+        pointSize: 4232,
+      },
+    });
+  });
+
+  test("conditions with variables, builtIn function and GreaterThan", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointColor: {
+              expression: {
+                conditions: [
+                  ["atan2(${GridY}, ${GridX}) > 0.0", "14343"],
+                  ["true", "123232"],
+                ],
+              },
+            },
+            pointSize: 23213,
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+        },
+        {
+          type: "feature",
+          id: "blah",
+          properties: {
+            GridY: 5,
+            GridX: 5,
+            properties: {
+              id: "2432432",
+            },
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: 14343,
+        pointSize: 23213,
+      },
+    });
+  });
+
+  test("Conditions with JSONPath, strictly equal and JSONPath result", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointColor: "#FF0000",
+            pointSize: {
+              expression: {
+                conditions: [
+                  ["${$.phoneNumbers[:1].type} === 'iPhone'", "${$.age}"],
+                  ["true", "1"],
+                ],
+              },
+            },
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+        },
+        {
+          type: "feature",
+          id: "blah",
+          properties: {
+            firstName: "John",
+            lastName: "doe",
+            age: 26,
+            address: {
+              streetAddress: "naist street",
+              city: "Nara",
+              postalCode: "630-0192",
+            },
+            phoneNumbers: [
+              {
+                type: "iPhone",
+                number: "0123-4567-8888",
+              },
+              {
+                type: "home",
+                number: "0123-4567-8910",
+              },
+            ],
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: "#FF0000",
+        pointSize: 26,
+      },
+    });
+  });
+
+  test("Conditions with Color in HexCode", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointSize: 26,
+            pointColor: {
+              expression: {
+                conditions: [
+                  ["${bgColor} === color('red')", "color('blue')"],
+                  ["true", "color('white')"],
+                ],
+              },
+            },
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+        },
+        {
+          type: "feature",
+          id: "blah",
+          properties: {
+            bgColor: "#FF0000",
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: "#0000FF", // blue
+        pointSize: 26,
+      },
+    });
+  });
+
+  test("Conditions with Color in RGBA", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointSize: 26,
+            pointColor: {
+              expression: {
+                conditions: [
+                  ["${bgColor} === rgba(255, 0, 0, 1)", "rgba(255, 255, 0, 1)"],
+                  ["true", "rgba(255, 255, 255, 1)"],
+                ],
+              },
+            },
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+        },
+        {
+          type: "feature",
+          id: "blah",
+          properties: {
+            bgColor: "#FF0000",
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: "#FFFF00",
+        pointSize: 26,
+      },
+    });
+  });
+
+  test("Expression with defines field in the layer", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointSize: 26,
+            pointColor: {
+              expression: {
+                conditions: [
+                  ["(${NewHeight} >= 100.0)", "${HeightColor}"],
+                  ["(${NewHeight} >= 1.0)", "color('#FF0000')"],
+                  ["true", "color('blue')"],
+                ],
+              },
+            },
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+          defines: {
+            NewHeight: "${Height}/2.0",
+            HeightColor: "color('#FF2000')",
+          },
+        },
+        {
+          type: "feature",
+          id: "blah",
+          properties: {
+            bgColor: "#FF0000",
+            Height: 200,
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: "#FF2000", // blue
+        pointSize: 26,
+      },
+    });
+  });
+
+  test("Layers with undefined feature", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointColor: "#FF0000",
+            pointSize: {
+              expression: {
+                conditions: [
+                  ["${$.phoneNumbers[:1].type} === 'iPhone'", "${$.age}"],
+                  ["true", "1"],
+                ],
+              },
+            },
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+          properties: {
+            firstName: "John",
+            lastName: "doe",
+            age: 26,
+            address: {
+              streetAddress: "naist street",
+              city: "Nara",
+              postalCode: "630-0192",
+            },
+            phoneNumbers: [
+              {
+                type: "iPhone",
+                number: "0123-4567-8888",
+              },
+              {
+                type: "home",
+                number: "0123-4567-8910",
+              },
+            ],
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: "#FF0000", // blue
+        pointSize: 26,
+      },
+    });
+  });
+
+  test("Property has reserved word", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointColor: "#FF0000",
+            pointSize: {
+              expression: {
+                conditions: [
+                  ["${he[llo]world} === 'value'", "100"],
+                  ["true", "1"],
+                ],
+              },
+            },
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+          properties: {
+            "he[llo]world": "value",
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: "#FF0000", // blue
+        pointSize: 100,
+      },
+    });
+  });
+
+  test("Number() input numberString has % in it", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointColor: "#FF0000",
+            pointSize: {
+              expression: {
+                conditions: [
+                  ["Number('0.32423%') < 1", "200"],
+                  ["true", "1"],
+                ],
+              },
+            },
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+          properties: {
+            "he[llo]world": "value",
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: "#FF0000", // blue
+        pointSize: 200,
+      },
+    });
+  });
+
+  test("Nested styling at 2nd degree", () => {
+    expect(
+      evalLayerAppearances(
+        {
+          marker: {
+            pointColor: "#FF0000",
+            pointSize: {
+              expression: {
+                conditions: [
+                  ["Number('0.32423%') < 1", "200"],
+                  ["true", "1"],
+                ],
+              },
+            },
+            labelTypography: {
+              fontSize: 20,
+              color: {
+                expression: {
+                  conditions: [
+                    ["${blah}==='value'", "color('#ff0000')"],
+                    ["true", "color('#ffffff')"],
+                  ],
+                },
+              },
+            },
+          },
+        },
+        {
+          id: "x",
+          type: "simple",
+          properties: {
+            blah: "value",
+          },
+        },
+      ),
+    ).toEqual({
+      marker: {
+        pointColor: "#FF0000", // blue
+        pointSize: 200,
+        labelTypography: {
+          fontSize: 20,
+          color: "#FF0000",
+        },
+      },
+    });
+  });
+});
diff --git a/web/src/beta/core/mantle/evaluator/simple/index.ts b/web/src/beta/core/mantle/evaluator/simple/index.ts
new file mode 100644
index 0000000000..657256fd1f
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/index.ts
@@ -0,0 +1,169 @@
+import { pick } from "lodash-es";
+
+import type { EvalContext, EvalResult } from "..";
+import {
+  appearanceKeys,
+  AppearanceTypes,
+  ComputedFeature,
+  Feature,
+  LayerAppearanceTypes,
+  LayerSimple,
+  ExpressionContainer,
+  TimeInterval,
+} from "../../types";
+
+import { ConditionalExpression } from "./conditionalExpression";
+import { clearExpressionCaches, Expression } from "./expression";
+import { evalTimeInterval } from "./interval";
+
+export async function evalSimpleLayer(
+  layer: LayerSimple,
+  ctx: EvalContext,
+): Promise<EvalResult | undefined> {
+  const features = layer.data ? await ctx.getAllFeatures(layer.data) : undefined;
+  const appearances: Partial<LayerAppearanceTypes> = pick(layer, appearanceKeys);
+  const timeIntervals = evalTimeInterval(features, layer.data?.time);
+  return {
+    layer: evalLayerAppearances(appearances, layer),
+    features: features?.map((f, i) => evalSimpleLayerFeature(layer, f, timeIntervals?.[i])),
+  };
+}
+
+export const evalSimpleLayerFeature = (
+  layer: LayerSimple,
+  feature: Feature,
+  interval?: TimeInterval,
+): ComputedFeature => {
+  const appearances: Partial<LayerAppearanceTypes> = pick(layer, appearanceKeys);
+  const nextFeature = evalJsonProperties(layer, feature);
+  return {
+    ...nextFeature,
+    ...evalLayerAppearances(appearances, layer, nextFeature),
+    type: "computedFeature",
+    interval,
+  };
+};
+
+export function evalLayerAppearances(
+  appearance: Partial<LayerAppearanceTypes>,
+  layer: LayerSimple,
+  feature?: Feature,
+): Partial<AppearanceTypes> {
+  if (!feature) {
+    if (!layer.id) {
+      throw new Error("layer id is required");
+    }
+    feature = {
+      type: "feature",
+      id: layer.id,
+      properties: layer.properties || {},
+    };
+  }
+
+  return Object.fromEntries(
+    Object.entries(appearance).map(([k, v]) => [k, recursiveValEval(v, layer, feature)]),
+  );
+}
+
+function recursiveValEval(obj: any, layer: LayerSimple, feature?: Feature): any {
+  return Object.fromEntries(
+    Object.entries(obj).map(([k, v]) => {
+      // if v is an object itself and not a null, recurse deeper
+      if (hasNonExpressionObject(v)) {
+        return [k, recursiveValEval(v, layer, feature)];
+      }
+      // if v is not an object, apply the evalExpression function
+      return [k, evalExpression(v, layer, feature)];
+    }),
+  );
+}
+
+export function clearAllExpressionCaches(
+  layer: LayerSimple | undefined,
+  feature: Feature | undefined,
+) {
+  const appearances: Partial<LayerAppearanceTypes> = pick(layer, appearanceKeys);
+  Object.entries(appearances).forEach(([, v]) => {
+    recursiveClear(v, layer, feature);
+  });
+}
+
+function recursiveClear(obj: any, layer: LayerSimple | undefined, feature: Feature | undefined) {
+  Object.entries(obj).forEach(([, v]) => {
+    // if v is an object itself and not a null, recurse deeper
+    if (hasNonExpressionObject(v)) {
+      recursiveClear(v, layer, feature);
+    } else if (hasExpression(v)) {
+      // if v is not an object, apply the clearExpressionCaches function
+      const styleExpression = v.expression;
+      if (typeof styleExpression === "object" && styleExpression.conditions) {
+        styleExpression.conditions.forEach(([expression1, expression2]) => {
+          clearExpressionCaches(expression1, feature, layer?.defines);
+          clearExpressionCaches(expression2, feature, layer?.defines);
+        });
+      } else if (typeof styleExpression === "boolean" || typeof styleExpression === "number") {
+        clearExpressionCaches(String(styleExpression), feature, layer?.defines);
+      } else if (typeof styleExpression === "string") {
+        clearExpressionCaches(styleExpression, feature, layer?.defines);
+      }
+    }
+  });
+}
+
+function hasExpression(e: any): e is ExpressionContainer {
+  return typeof e === "object" && e && "expression" in e;
+}
+
+function hasNonExpressionObject(v: any): boolean {
+  return typeof v === "object" && v && !("expression" in v);
+}
+
+function evalExpression(
+  expressionContainer: any,
+  layer: LayerSimple,
+  feature?: Feature,
+): unknown | undefined {
+  try {
+    if (hasExpression(expressionContainer)) {
+      const styleExpression = expressionContainer.expression;
+      if (typeof styleExpression === "undefined") {
+        return undefined;
+      } else if (typeof styleExpression === "object" && styleExpression.conditions) {
+        return new ConditionalExpression(styleExpression, feature, layer.defines).evaluate();
+      } else if (typeof styleExpression === "boolean" || typeof styleExpression === "number") {
+        return new Expression(String(styleExpression), feature, layer.defines).evaluate();
+      } else if (typeof styleExpression === "string") {
+        return new Expression(styleExpression, feature, layer.defines).evaluate();
+      }
+      return styleExpression;
+    }
+    return expressionContainer;
+  } catch (e) {
+    console.error(e);
+    return;
+  }
+}
+
+function evalJsonProperties(layer: LayerSimple, feature: Feature): Feature {
+  const keys = layer.data?.jsonProperties;
+  if (!feature.properties || !keys || !keys.length) {
+    return feature;
+  }
+
+  const next = {
+    ...feature,
+    ...(feature?.properties ? { properties: { ...feature.properties } } : {}),
+  };
+  keys.forEach(k => {
+    next.properties[k] = (() => {
+      const p = next.properties[k];
+      try {
+        return JSON.parse(p);
+      } catch {
+        return p;
+      }
+    })();
+  });
+
+  return next;
+}
diff --git a/web/src/beta/core/mantle/evaluator/simple/interval.test.ts b/web/src/beta/core/mantle/evaluator/simple/interval.test.ts
new file mode 100644
index 0000000000..cfa76affc8
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/interval.test.ts
@@ -0,0 +1,102 @@
+import { expect, test } from "vitest";
+
+import { evalTimeInterval } from "./interval";
+
+test("evalTimeInterval", () => {
+  expect(
+    evalTimeInterval(
+      [
+        {
+          type: "feature",
+          id: "a",
+          properties: {
+            time: "2023-02-03T00:00:00.000Z",
+          },
+        },
+      ],
+      { property: "time" },
+    ),
+  ).toEqual([[new Date("2023-02-03T00:00:00.000Z"), undefined]]);
+
+  expect(
+    evalTimeInterval(
+      [
+        {
+          type: "feature",
+          id: "d",
+          properties: {
+            time: "2024-02-03T00:00:00.000Z",
+          },
+        },
+        {
+          type: "feature",
+          id: "b",
+          properties: {
+            time: "2023-02-04T00:00:00.000Z",
+          },
+        },
+        {
+          type: "feature",
+          id: "a",
+          properties: {
+            time: "2023-02-03T00:00:00.000Z",
+          },
+        },
+        {
+          type: "feature",
+          id: "c",
+          properties: {
+            time: "2023-02-05T00:00:00.000Z",
+          },
+        },
+      ],
+      { property: "time" },
+    ),
+  ).toEqual([
+    [new Date("2023-02-03T00:00:00.000Z"), new Date("2023-02-04T00:00:00.000Z")],
+    [new Date("2023-02-04T00:00:00.000Z"), new Date("2023-02-05T00:00:00.000Z")],
+    [new Date("2023-02-05T00:00:00.000Z"), new Date("2024-02-03T00:00:00.000Z")],
+    [new Date("2024-02-03T00:00:00.000Z"), undefined],
+  ]);
+
+  expect(
+    evalTimeInterval(
+      [
+        {
+          type: "feature",
+          id: "d",
+          properties: {
+            time: "2024-02-03T00:00:00.000Z",
+          },
+        },
+        {
+          type: "feature",
+          id: "b",
+          properties: {
+            time: "2023-02-04T00:00:00.000Z",
+          },
+        },
+        {
+          type: "feature",
+          id: "a",
+          properties: {
+            time: "2023-02-03T00:00:00.000Z",
+          },
+        },
+        {
+          type: "feature",
+          id: "c",
+          properties: {
+            time: "2023-02-05T00:00:00.000Z",
+          },
+        },
+      ],
+      { property: "time", interval: 1000 },
+    ),
+  ).toEqual([
+    [new Date("2023-02-03T00:00:00.000Z"), new Date("2023-02-03T00:00:01.000Z")],
+    [new Date("2023-02-04T00:00:00.000Z"), new Date("2023-02-04T00:00:01.000Z")],
+    [new Date("2023-02-05T00:00:00.000Z"), new Date("2023-02-05T00:00:01.000Z")],
+    [new Date("2024-02-03T00:00:00.000Z"), new Date("2024-02-03T00:00:01.000Z")],
+  ]);
+});
diff --git a/web/src/beta/core/mantle/evaluator/simple/interval.ts b/web/src/beta/core/mantle/evaluator/simple/interval.ts
new file mode 100644
index 0000000000..9049d34c66
--- /dev/null
+++ b/web/src/beta/core/mantle/evaluator/simple/interval.ts
@@ -0,0 +1,27 @@
+import { Data, Feature, TimeInterval } from "../../types";
+
+export function evalTimeInterval(
+  features: Feature[] | undefined,
+  time: Data["time"],
+): TimeInterval[] | void {
+  if (!features || !time?.property) {
+    return;
+  }
+  const startTimes: Date[] = [];
+  for (const feature of features) {
+    const property = feature.properties[time.property];
+    if (!property) {
+      continue;
+    }
+    try {
+      startTimes.push(new Date(property));
+    } catch {
+      // do nothing
+    }
+  }
+  startTimes.sort((a, b) => a.getTime() - b.getTime());
+  return startTimes.map((start, i) => [
+    start,
+    time.interval ? new Date(start.getTime() + time.interval) : startTimes[i + 1],
+  ]);
+}
diff --git a/web/src/beta/core/mantle/index.ts b/web/src/beta/core/mantle/index.ts
new file mode 100644
index 0000000000..0b1426d86b
--- /dev/null
+++ b/web/src/beta/core/mantle/index.ts
@@ -0,0 +1,6 @@
+export * from "./types";
+export * from "./compat";
+export { evalFeature, clearAllExpressionCaches } from "./evaluator";
+export { computeAtom } from "./atoms";
+export type { Atom } from "./atoms";
+export { guessType } from "./data";
diff --git a/web/src/beta/core/mantle/types/appearance.ts b/web/src/beta/core/mantle/types/appearance.ts
new file mode 100644
index 0000000000..1824860aa4
--- /dev/null
+++ b/web/src/beta/core/mantle/types/appearance.ts
@@ -0,0 +1,237 @@
+import { objKeys } from "../utils";
+
+import type { ExpressionContainer } from "./expression";
+import type {
+  Camera,
+  ClassificationType,
+  EXPERIMENTAL_clipping,
+  LatLng,
+  Typography,
+} from "./value";
+
+export type LayerAppearance<T> = {
+  [K in keyof T]?: T[K] | LayerAppearance<T[K]> | ExpressionContainer;
+};
+
+export type LayerAppearanceTypes = {
+  [K in keyof AppearanceTypes]: LayerAppearance<AppearanceTypes[K]>;
+};
+
+export type AppearanceTypes = {
+  marker: MarkerAppearance;
+  polyline: PolylineAppearance;
+  polygon: PolygonAppearance;
+  model: ModelAppearance;
+  "3dtiles": Cesium3DTilesAppearance;
+  ellipsoid: EllipsoidAppearance;
+  box: BoxAppearance;
+  photooverlay: LegacyPhotooverlayAppearance;
+  resource: ResourceAppearance;
+  raster: RasterAppearance;
+};
+
+export type MarkerAppearance = {
+  show?: boolean;
+  heightReference?: "none" | "clamp" | "relative";
+  style?: "none" | "point" | "image";
+  pointSize?: number;
+  pointColor?: string;
+  pointOutlineColor?: string;
+  pointOutlineWidth?: number;
+  image?: string;
+  imageSize?: number;
+  imageSizeInMeters?: boolean;
+  imageHorizontalOrigin?: "left" | "center" | "right";
+  imageVerticalOrigin?: "top" | "center" | "baseline" | "bottom";
+  imageColor?: string;
+  imageCrop?: "none" | "rounded" | "circle";
+  imageShadow?: boolean;
+  imageShadowColor?: string;
+  imageShadowBlur?: number;
+  imageShadowPositionX?: number;
+  imageShadowPositionY?: number;
+  label?: boolean;
+  labelText?: string;
+  labelPosition?:
+    | "left"
+    | "right"
+    | "top"
+    | "bottom"
+    | "lefttop"
+    | "leftbottom"
+    | "righttop"
+    | "rightbottom";
+  labelTypography?: Typography;
+  labelBackground?: boolean;
+  labelBackgroundColor?: string;
+  labelBackgroundPaddingHorizontal?: number;
+  labelBackgroundPaddingVertical?: number;
+  extrude?: boolean;
+  near?: number;
+  far?: number;
+};
+
+export type PolylineAppearance = {
+  show?: boolean;
+  clampToGround?: boolean;
+  strokeColor?: string;
+  strokeWidth?: number;
+  shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
+  near?: number;
+  far?: number;
+  classificationType?: ClassificationType;
+};
+
+export type PolygonAppearance = {
+  show?: boolean;
+  fill?: boolean;
+  fillColor?: string;
+  stroke?: boolean;
+  strokeColor?: string;
+  strokeWidth?: number;
+  heightReference?: "none" | "clamp" | "relative";
+  shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
+  lineJoin?: CanvasLineJoin;
+  near?: number;
+  far?: number;
+  extrudedHeight?: number;
+  classificationType?: ClassificationType;
+};
+
+export type EllipsoidAppearance = {
+  show?: boolean;
+  heightReference?: "none" | "clamp" | "relative";
+  shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
+  radius?: number;
+  fillColor?: string;
+  near?: number;
+  far?: number;
+};
+
+export type ModelAppearance = {
+  show?: boolean;
+  model?: string; // For compat
+  url?: string;
+  heightReference?: "none" | "clamp" | "relative";
+  heading?: number;
+  pitch?: number;
+  roll?: number;
+  scale?: number;
+  maximumScale?: number;
+  minimumPixelSize?: number;
+  animation?: boolean; // default: true
+  shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
+  colorBlend?: "none" | "highlight" | "replace" | "mix";
+  color?: string;
+  colorBlendAmount?: number;
+  lightColor?: string;
+  silhouette?: boolean;
+  silhouetteColor?: string;
+  bearing?: number;
+  silhouetteSize?: number; // default: 1
+  near?: number;
+  far?: number;
+};
+
+export type Cesium3DTilesAppearance = {
+  show?: boolean;
+  color?: string;
+  styleUrl?: string;
+  shadows?: "disabled" | "enabled" | "cast_only" | "receive_only";
+  colorBlendMode?: "highlight" | "replace" | "mix" | "default";
+  edgeWidth?: number;
+  edgeColor?: string;
+  tileset?: string;
+  experimental_clipping?: EXPERIMENTAL_clipping;
+  pointSize?: number;
+  meta?: unknown;
+};
+
+export type LegacyPhotooverlayAppearance = {
+  show?: boolean;
+  location?: LatLng;
+  height?: number;
+  heightReference?: "none" | "clamp" | "relative";
+  camera?: Camera; // You may also update the field name in storytelling widget
+  image?: string;
+  imageSize?: number;
+  imageHorizontalOrigin?: "left" | "center" | "right";
+  imageVerticalOrigin?: "top" | "center" | "baseline" | "bottom";
+  imageCrop?: "none" | "rounded" | "circle";
+  imageShadow?: boolean;
+  imageShadowColor?: string;
+  imageShadowBlur?: number;
+  imageShadowPositionX?: number;
+  imageShadowPositionY?: number;
+  photoOverlayImage?: string;
+  photoOverlayDescription?: string;
+  near?: number;
+  far?: number;
+};
+
+export type ResourceAppearance = {
+  show?: boolean;
+  url?: string;
+  type?: "geojson" | "kml" | "czml" | "auto";
+  clampToGround?: boolean;
+  markerSize?: number;
+  markerColor?: string;
+  stroke?: string;
+  strokeWidth?: number;
+  fill?: string;
+};
+
+export type RasterAppearance = {
+  show?: boolean;
+  minimumLevel?: number;
+  maximumLevel?: number;
+  credit?: string;
+  alpha?: number;
+};
+
+export type BoxAppearance = {
+  show?: boolean;
+  height?: number;
+  width?: number;
+  length?: number;
+  heading?: number;
+  pitch?: number;
+  roll?: number;
+  fillColor?: string;
+  outlineColor?: string;
+  activeOutlineColor?: string;
+  outlineWidth?: number;
+  draggableOutlineColor?: string;
+  activeDraggableOutlineColor?: string;
+  draggableOutlineWidth?: number;
+  scalePoint?: boolean;
+  axisLine?: boolean;
+  pointFillColor?: string;
+  pointOutlineColor?: string;
+  activePointOutlineColor?: string;
+  pointOutlineWidth?: number;
+  axisLineColor?: string;
+  axisLineWidth?: number;
+  allowEnterGround?: boolean;
+  cursor?: string;
+  activeBox?: boolean;
+  activeScalePointIndex?: number; // 0 ~ 11
+  activeEdgeIndex?: number; // 0 ~ 11
+  near?: number;
+  far?: number;
+};
+
+export const appearanceKeyObj: { [k in keyof AppearanceTypes]: 1 } = {
+  marker: 1,
+  polyline: 1,
+  polygon: 1,
+  ellipsoid: 1,
+  model: 1,
+  "3dtiles": 1,
+  box: 1,
+  photooverlay: 1,
+  resource: 1,
+  raster: 1,
+};
+
+export const appearanceKeys = objKeys<keyof AppearanceTypes>(appearanceKeyObj);
diff --git a/web/src/beta/core/mantle/types/events.ts b/web/src/beta/core/mantle/types/events.ts
new file mode 100644
index 0000000000..6267c0838e
--- /dev/null
+++ b/web/src/beta/core/mantle/types/events.ts
@@ -0,0 +1,16 @@
+export type Events = {
+  select?: SelectEvent;
+};
+
+export type SelectEvent = {
+  // disabled?: boolean;
+  openUrl?: OpenUrlEvent;
+  // photoOverlay?: PhotoOverlayEvent;
+};
+
+export type OpenUrlEvent = {
+  url?: string;
+  urlKey?: string;
+};
+
+// export type PhotoOverlayEvent = {};
diff --git a/web/src/beta/core/mantle/types/expression.ts b/web/src/beta/core/mantle/types/expression.ts
new file mode 100644
index 0000000000..0a2495a079
--- /dev/null
+++ b/web/src/beta/core/mantle/types/expression.ts
@@ -0,0 +1,9 @@
+export type ExpressionContainer = {
+  expression: StyleExpression;
+};
+
+export type StyleExpression = ConditionsExpression | string;
+
+export type ConditionsExpression = {
+  conditions: [string, string][];
+};
diff --git a/web/src/beta/core/mantle/types/index.ts b/web/src/beta/core/mantle/types/index.ts
new file mode 100644
index 0000000000..00c9de91e9
--- /dev/null
+++ b/web/src/beta/core/mantle/types/index.ts
@@ -0,0 +1,142 @@
+import type {
+  LineString,
+  Point,
+  Polygon,
+  MultiPoint,
+  MultiLineString,
+  MultiPolygon,
+} from "geojson";
+
+import type { Infobox, Block, Tag } from "../compat/types";
+
+import type { AppearanceTypes, LayerAppearanceTypes } from "./appearance";
+import type { Events } from "./events";
+
+export * from "./appearance";
+export * from "./value";
+export * from "./expression";
+
+// Layer
+
+export type Layer = LayerSimple | LayerGroup;
+
+export type LayerSimple = {
+  type: "simple";
+  data?: Data;
+  properties?: any;
+  defines?: Record<string, string>;
+  events?: Events;
+} & Partial<LayerAppearanceTypes> &
+  LayerCommon;
+
+export type LayerGroup = {
+  type: "group";
+  children: Layer[];
+} & LayerCommon;
+
+export type LayerCommon = {
+  id: string;
+  title?: string;
+  /** default is true */
+  visible?: boolean;
+  infobox?: Infobox;
+  tags?: Tag[];
+  creator?: string;
+  compat?: LayerCompat;
+};
+
+export type LayerCompat = { extensionId?: string; property?: any; propertyId?: string };
+
+/** Same as a Layer, but its ID is unknown. */
+export type NaiveLayer = NaiveLayerSimple | NaiveLayerGroup;
+export type NaiveLayerSimple = Omit<LayerSimple, "id" | "infobox"> & { infobox?: NaiveInfobox };
+export type NaiveLayerGroup = Omit<LayerGroup, "id" | "children" | "infobox"> & {
+  infobox?: NaiveInfobox;
+  children?: NaiveLayer[];
+};
+export type NaiveInfobox = Omit<Infobox, "id" | "blocks"> & { blocks?: NaiveBlock[] };
+export type NaiveBlock<P = any> = Omit<Block<P>, "id">;
+
+export type SelectedFeatureInfo = {
+  feature?: ComputedFeature;
+};
+
+// Data
+
+export type Data = {
+  type: DataType;
+  url?: string;
+  value?: any;
+  layers?: string | string[];
+  jsonProperties?: string[];
+  updateInterval?: number; // milliseconds
+  parameters?: Record<string, any>;
+  time?: {
+    property?: string;
+    interval?: number; // milliseconds
+    updateClockOnLoad?: boolean;
+  };
+  csv?: {
+    idColumn?: string | number;
+    latColumn?: string | number;
+    lngColumn?: string | number;
+    heightColumn?: string | number;
+    noHeader?: boolean;
+    disableTypeConversion?: boolean;
+  };
+};
+
+export type DataRange = {
+  x: number;
+  y: number;
+  z: number;
+};
+
+export type DataType =
+  | "geojson"
+  | "3dtiles"
+  | "osm-buildings"
+  | "czml"
+  | "csv"
+  | "wms"
+  | "mvt"
+  | "kml"
+  | "gpx"
+  | "shapefile"
+  | "gtfs"
+  | "gml"
+  | "georss"
+  | "gltf"
+  | "tiles"
+  | "tms";
+
+export type TimeInterval = [start: Date, end?: Date];
+
+// Feature
+export type CommonFeature<T extends "feature" | "computedFeature"> = {
+  type: T;
+  id: string;
+  geometry?: Geometry;
+  interval?: TimeInterval;
+  properties?: any;
+  range?: DataRange;
+};
+
+export type Feature = CommonFeature<"feature">;
+
+export type Geometry = Point | LineString | Polygon | MultiPoint | MultiLineString | MultiPolygon;
+
+export type ComputedLayerStatus = "fetching" | "ready";
+
+// Computed
+
+export type ComputedLayer = {
+  id: string;
+  status: ComputedLayerStatus;
+  layer: Layer;
+  originalFeatures: Feature[];
+  features: ComputedFeature[];
+  properties?: any;
+} & Partial<AppearanceTypes>;
+
+export type ComputedFeature = CommonFeature<"computedFeature"> & Partial<AppearanceTypes>;
diff --git a/web/src/beta/core/mantle/types/value.ts b/web/src/beta/core/mantle/types/value.ts
new file mode 100644
index 0000000000..a1ca415ef5
--- /dev/null
+++ b/web/src/beta/core/mantle/types/value.ts
@@ -0,0 +1,107 @@
+export type LatLng = {
+  lat: number;
+  lng: number;
+};
+
+export type LatLngHeight = {
+  lat: number;
+  lng: number;
+  height: number;
+};
+
+export type Camera = {
+  lat: number;
+  lng: number;
+  height: number;
+  heading: number;
+  pitch: number;
+  roll: number;
+  fov: number;
+};
+
+export type Typography = {
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: number;
+  color?: string;
+  textAlign?: "left" | "center" | "right" | "justify" | "justify_all";
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+};
+
+export type Coordinates = LatLngHeight[];
+
+export type Polygon = LatLngHeight[][];
+
+export type Rect = {
+  west: number;
+  south: number;
+  east: number;
+  north: number;
+};
+
+// Ideal for plugin developers, but it's hard to implement it with Cesium
+export type Plane = {
+  location: LatLngHeight;
+  width: number;
+  height: number;
+  length: number;
+  heading: number;
+  pitch: number;
+};
+
+// Familiar with Cesium
+export type EXPERIMENTAL_clipping = {
+  useBuiltinBox?: boolean;
+  allowEnterGround?: boolean;
+  planes?: {
+    normal: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    distance: number;
+  }[];
+  visible?: boolean;
+  // for compat
+  location?: LatLngHeight;
+  coordinates?: number[];
+  /**
+   * x-axis
+   */
+  width?: number;
+  /**
+   * y-axis
+   */
+  length?: number;
+  /**
+   * z-axis
+   */
+  height?: number;
+  heading?: number;
+  pitch?: number;
+  roll?: number;
+  direction?: "inside" | "outside";
+};
+
+// Don't forget adding a new field to valueTypeMapper also!
+export type ValueTypes = {
+  string: string;
+  number: number;
+  bool: boolean;
+  latlng: LatLng;
+  latlngheight: LatLngHeight;
+  url: string;
+  camera: Camera;
+  typography: Typography;
+  coordinates: Coordinates;
+  polygon: Polygon;
+  rect: Rect;
+  ref: string;
+  tiletype: string;
+};
+
+export type ValueType = keyof ValueTypes;
+
+export type ClassificationType = "both" | "terrain" | "3dtiles";
diff --git a/web/src/beta/core/mantle/utils.test.ts b/web/src/beta/core/mantle/utils.test.ts
new file mode 100644
index 0000000000..29670b6ca9
--- /dev/null
+++ b/web/src/beta/core/mantle/utils.test.ts
@@ -0,0 +1,74 @@
+import { expect, test } from "vitest";
+
+import { getCoord, getCoords, getGeom } from "./utils";
+
+test("getCoord", () => {
+  expect(getCoord("a")).toBeUndefined();
+  expect(getCoord({ type: "Point", coordinates: [1, 2] })).toEqual([1, 2]);
+  expect(getCoord({ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } })).toEqual([
+    1, 2,
+  ]);
+  expect(getCoord({ type: "LineString", coordinates: [[1, 2]] })).toBeUndefined();
+  expect(getCoord({ type: "Polygon", coordinates: [[[1, 2]]] })).toBeUndefined();
+  expect(
+    getCoord({
+      type: "FeatureCollection",
+      features: [{ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } }],
+    }),
+  ).toBeUndefined();
+});
+
+test("getCoords", () => {
+  expect(getCoords("a")).toBeUndefined();
+  expect(getCoords({ type: "Point", coordinates: [1, 2] })).toEqual([1, 2]);
+  expect(getCoords({ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } })).toEqual([
+    1, 2,
+  ]);
+  expect(getCoords({ type: "LineString", coordinates: [[1, 2]] })).toEqual([[1, 2]]);
+  expect(
+    getCoords({
+      type: "Polygon",
+      coordinates: [
+        [
+          [1, 2],
+          [2, 3],
+        ],
+      ],
+    }),
+  ).toEqual([
+    [
+      [1, 2],
+      [2, 3],
+    ],
+  ]);
+  expect(
+    getCoords({
+      type: "FeatureCollection",
+      features: [{ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } }],
+    }),
+  ).toBeUndefined();
+});
+
+test("getGeom", () => {
+  expect(getGeom("a")).toBeUndefined();
+  expect(getGeom({ type: "Point", coordinates: [1, 2] })).toEqual({
+    type: "Point",
+    coordinates: [1, 2],
+  });
+  expect(getGeom({ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } })).toEqual({
+    type: "Point",
+    coordinates: [1, 2],
+  });
+  expect(
+    getGeom({
+      type: "GeometryCollection",
+      geometries: [{ type: "Point", coordinates: [1, 2] }],
+    }),
+  ).toBeUndefined();
+  expect(
+    getGeom({
+      type: "FeatureCollection",
+      features: [{ type: "Feature", geometry: { type: "Point", coordinates: [1, 2] } }],
+    }),
+  ).toBeUndefined();
+});
diff --git a/web/src/beta/core/mantle/utils.ts b/web/src/beta/core/mantle/utils.ts
new file mode 100644
index 0000000000..7cadb3e7af
--- /dev/null
+++ b/web/src/beta/core/mantle/utils.ts
@@ -0,0 +1,53 @@
+import { getCoord as turfGetCoord, getCoords as turfGetCoords } from "@turf/turf";
+import type { Geometry, GeometryCollection } from "geojson";
+
+export const getCoord = wrap(turfGetCoord);
+export const getCoords = wrap(turfGetCoords);
+
+export const getGeom = (g: any): Exclude<Geometry, GeometryCollection<Geometry>> | undefined => {
+  if (typeof g !== "object" || !g || !("type" in g)) return;
+
+  if (g.type === "Feature") return getGeom(g.geometry);
+
+  if (
+    g.type !== "Point" &&
+    g.type !== "MultiPoint" &&
+    g.type !== "LineString" &&
+    g.type !== "MultiLineString" &&
+    g.type !== "Polygon" &&
+    g.type !== "MultiPolygon"
+  )
+    return;
+
+  return g;
+};
+
+function wrap<T>(f: (d: any) => T): (d: any) => T | undefined {
+  return (d: any) => {
+    try {
+      return f(d);
+    } catch {
+      return;
+    }
+  };
+}
+
+/**
+ * Often we want to make an array of keys of an object type,
+ * but if we just specify the key names directly, we may forget to change the array if the object type is changed.
+ * With this function, the compiler checks the object keys for completeness, so the array of keys is always up to date.
+ */
+export function objKeys<T extends string | number | symbol>(obj: { [k in T]: 1 }): T[] {
+  return Object.keys(obj) as T[];
+}
+
+export function defined(value: any) {
+  return value !== undefined && value !== null;
+}
+
+export function defaultValue(a: any, b: any) {
+  if (a !== undefined && a !== null) {
+    return a;
+  }
+  return b;
+}
diff --git a/web/src/beta/features/Visualizer/CanvasArea/hooks.ts b/web/src/beta/features/Visualizer/CanvasArea/hooks.ts
new file mode 100644
index 0000000000..fd732855aa
--- /dev/null
+++ b/web/src/beta/features/Visualizer/CanvasArea/hooks.ts
@@ -0,0 +1,240 @@
+import { useMemo, useEffect, useCallback } from "react";
+
+import type { Alignment, Location } from "@reearth/beta/core/Crust";
+import type { LatLng, Tag, ValueTypes, ComputedLayer } from "@reearth/beta/core/mantle";
+import type { Layer, LayerSelectionReason, Cluster } from "@reearth/beta/core/Map";
+import { config } from "@reearth/services/config";
+import {
+  useSceneId,
+  useSceneMode,
+  useIsCapturing,
+  useCamera,
+  useSelected,
+  useSelectedBlock,
+  useWidgetAlignEditorActivated,
+  useZoomedLayerId,
+  useSelectedWidgetArea,
+} from "@reearth/services/state";
+
+import { BlockType } from "./type";
+
+export default (isBuilt?: boolean) => {
+  const [sceneId] = useSceneId();
+  const [sceneMode, setSceneMode] = useSceneMode();
+  const [isCapturing, onIsCapturingChange] = useIsCapturing();
+  const [camera, onCameraChange] = useCamera();
+  const [selected, select] = useSelected();
+  const [selectedBlock, selectBlock] = useSelectedBlock();
+  const [selectedWidgetArea, selectWidgetArea] = useSelectedWidgetArea();
+  const [widgetAlignEditorActivated] = useWidgetAlignEditorActivated();
+  const [zoomedLayerId, zoomToLayer] = useZoomedLayerId();
+
+  const onBlockMove = useCallback(
+    async (_id: string, _fromIndex: number, _toIndex: number) => {
+      if (selected?.type !== "layer") return;
+      console.log("Block has been moved!");
+    },
+    [selected],
+  );
+
+  const onBlockRemove = useCallback(
+    async (_id: string) => {
+      if (selected?.type !== "layer") return;
+      console.log("Block has been removed!");
+    },
+    [selected],
+  );
+
+  // convert data
+  const selectedLayerId = useMemo(
+    () =>
+      selected?.type === "layer"
+        ? { layerId: selected.layerId, featureId: selected.featureId }
+        : undefined,
+    [selected],
+  );
+  const layerSelectionReason = useMemo(
+    () => (selected?.type === "layer" ? selected.layerSelectionReason : undefined),
+    [selected],
+  );
+
+  // TODO: Use GQL value
+  const rootLayerId = "";
+
+  const layers = useMemo(() => {
+    const l = {
+      type: "simple",
+      id: "123",
+      data: {
+        type: "geojson",
+        value: {
+          // GeoJSON
+          type: "Feature",
+          geometry: {
+            coordinates: [-15.209829106984472, 20.323569554406248, 10000],
+            type: "Point",
+          },
+        },
+      },
+      marker: {},
+    } as Layer;
+    return [l];
+  }, []);
+
+  const widgets = useMemo(
+    () => ({
+      alignSystem: undefined,
+      floatingWidgets: undefined,
+      layoutConstraint: undefined,
+      ownBuiltinWidgets: undefined,
+    }),
+    [],
+  );
+  // TODO: Fix to use exact type through GQL typing
+  const sceneProperty: any = useMemo(
+    () => ({
+      tiles: [
+        {
+          id: "default",
+          tile_type: "default",
+        },
+      ],
+    }),
+    [],
+  );
+  const tags: Tag | undefined = useMemo(() => undefined, []);
+
+  const clusters: Cluster[] = [];
+
+  const pluginProperty = useMemo(() => undefined, []);
+
+  // TODO: Don't forget handle featureId
+  const selectLayer = useCallback(
+    (
+      id?: string,
+      featureId?: string,
+      _layer?: () => Promise<ComputedLayer | undefined>,
+      layerSelectionReason?: LayerSelectionReason,
+    ) => select(id ? { layerId: id, featureId, layerSelectionReason, type: "layer" } : undefined),
+    [select],
+  );
+
+  const onBlockChange = useCallback(
+    async <T extends keyof ValueTypes>(
+      blockId: string,
+      _schemaGroupId: string,
+      _fid: string,
+      _v: ValueTypes[T],
+      vt: T,
+      selectedLayer?: Layer,
+    ) => {
+      const propertyId = (selectedLayer?.infobox?.blocks?.find(b => b.id === blockId) as any)
+        ?.propertyId as string | undefined;
+      if (!propertyId) return;
+
+      console.log("Block has been changed!");
+    },
+    [],
+  );
+
+  const onFovChange = useCallback(
+    (fov: number) => camera && onCameraChange({ ...camera, fov }),
+    [camera, onCameraChange],
+  );
+
+  useEffect(() => {
+    sceneProperty?.default?.sceneMode && setSceneMode(sceneProperty?.default?.sceneMode);
+  }, [sceneProperty, setSceneMode]);
+
+  // block selector
+  const blocks: BlockType[] = useMemo(() => [], []);
+  const onBlockInsert = (bi: number, _i: number, _p?: "top" | "bottom") => {
+    const b = blocks?.[bi];
+    if (b?.pluginId && b?.extensionId && selected?.type === "layer") {
+      console.log("Block has been inserted!");
+    }
+  };
+
+  // TODO: Use GQL value
+  const title = "TITLE";
+  useEffect(() => {
+    if (!isBuilt || !title) return;
+    document.title = title;
+  }, [isBuilt, title]);
+
+  const handleDropLayer = useCallback(
+    async (_propertyId: string, propertyKey: string, _position?: LatLng) => {
+      // propertyKey will be "default.location" for example
+      const [_schemaGroupId, _fieldId] = propertyKey.split(".", 2);
+
+      console.log("Layer has been draped!");
+    },
+    [],
+  );
+
+  const onWidgetUpdate = useCallback(
+    async (_id: string, _update: { location?: Location; extended?: boolean; index?: number }) => {
+      if (!sceneId) return;
+
+      console.log("Widget has been updated!");
+    },
+    [sceneId],
+  );
+
+  const onWidgetAlignSystemUpdate = useCallback(
+    async (_location: Location, _align: Alignment) => {
+      if (!sceneId) return;
+
+      console.log("WAS has been updated!");
+    },
+    [sceneId],
+  );
+
+  const engineMeta = useMemo(
+    () => ({
+      cesiumIonAccessToken: config()?.cesiumIonAccessToken,
+    }),
+    [],
+  );
+
+  const useExperimentalSandbox = useMemo(() => {
+    return !!sceneProperty?.experimental?.experimental_sandbox;
+  }, [sceneProperty]);
+
+  return {
+    sceneId,
+    rootLayerId,
+    selectedLayerId,
+    zoomedLayerId,
+    selectedBlockId: selectedBlock,
+    sceneProperty,
+    pluginProperty,
+    clusters,
+    tags,
+    widgets,
+    layers,
+    blocks,
+    isCapturing,
+    sceneMode,
+    camera,
+    selectedWidgetArea,
+    widgetAlignEditorActivated,
+    engineMeta,
+    layerSelectionReason,
+    useExperimentalSandbox,
+    selectLayer,
+    selectBlock,
+    onBlockChange,
+    onBlockMove,
+    onBlockRemove,
+    onBlockInsert,
+    onWidgetUpdate,
+    selectWidgetArea,
+    onWidgetAlignSystemUpdate,
+    onIsCapturingChange,
+    onCameraChange,
+    onFovChange,
+    handleDropLayer,
+    zoomToLayer,
+  };
+};
diff --git a/web/src/beta/features/Visualizer/CanvasArea/index.tsx b/web/src/beta/features/Visualizer/CanvasArea/index.tsx
new file mode 100644
index 0000000000..32ec9c0978
--- /dev/null
+++ b/web/src/beta/features/Visualizer/CanvasArea/index.tsx
@@ -0,0 +1,113 @@
+import React, { useCallback } from "react";
+
+import ContentPicker from "@reearth/beta/components/ContentPicker";
+import Visualizer, { type Props as VisualizerProps } from "@reearth/beta/core/Visualizer";
+import { config } from "@reearth/services/config";
+
+import FovSlider from "../FovSlider";
+
+import useHooks from "./hooks";
+
+export type Props = {
+  isBuilt?: boolean;
+  inEditor?: boolean;
+};
+
+const CanvasArea: React.FC<Props> = ({ isBuilt, inEditor }) => {
+  const {
+    rootLayerId,
+    selectedBlockId,
+    zoomedLayerId,
+    sceneProperty,
+    pluginProperty,
+    clusters,
+    layers,
+    widgets,
+    tags,
+    selectedLayerId,
+    blocks,
+    isCapturing,
+    sceneMode,
+    camera,
+    selectedWidgetArea,
+    widgetAlignEditorActivated,
+    engineMeta,
+    layerSelectionReason,
+    useExperimentalSandbox,
+    selectLayer,
+    selectBlock,
+    onBlockChange,
+    onBlockMove,
+    onBlockRemove,
+    onBlockInsert,
+    onWidgetUpdate,
+    onWidgetAlignSystemUpdate,
+    selectWidgetArea,
+    onIsCapturingChange,
+    onCameraChange,
+    onFovChange,
+    handleDropLayer,
+    zoomToLayer,
+  } = useHooks(isBuilt);
+  const renderInfoboxInsertionPopUp = useCallback<
+    NonNullable<VisualizerProps["renderInfoboxInsertionPopup"]>
+  >(
+    (onSelect, onClose) => (
+      <ContentPicker items={blocks} onSelect={onSelect} onClickAway={onClose} />
+    ),
+    [blocks],
+  );
+
+  return (
+    <>
+      <Visualizer
+        engine="cesium"
+        isEditable={!isBuilt}
+        isBuilt={!!isBuilt}
+        inEditor={!!inEditor}
+        layers={layers}
+        widgetAlignSystem={widgets?.alignSystem}
+        floatingWidgets={widgets?.floatingWidgets}
+        widgetLayoutConstraint={widgets?.layoutConstraint}
+        ownBuiltinWidgets={widgets?.ownBuiltinWidgets}
+        selectedLayerId={selectedLayerId}
+        selectedBlockId={selectedBlockId}
+        selectedWidgetArea={selectedWidgetArea}
+        zoomedLayerId={zoomedLayerId}
+        rootLayerId={rootLayerId}
+        sceneProperty={sceneProperty}
+        tags={tags}
+        pluginProperty={pluginProperty}
+        clusters={clusters}
+        camera={camera}
+        ready={isBuilt || (!!layers && !!widgets)}
+        pluginBaseUrl={config()?.plugins}
+        widgetAlignSystemEditing={widgetAlignEditorActivated}
+        meta={engineMeta}
+        layerSelectionReason={layerSelectionReason}
+        useExperimentalSandbox={useExperimentalSandbox}
+        onLayerSelect={selectLayer}
+        onCameraChange={onCameraChange}
+        onWidgetLayoutUpdate={onWidgetUpdate}
+        onWidgetAlignmentUpdate={onWidgetAlignSystemUpdate}
+        onWidgetAreaSelect={selectWidgetArea}
+        onBlockSelect={selectBlock}
+        onBlockChange={onBlockChange}
+        onBlockMove={onBlockMove}
+        onBlockDelete={onBlockRemove}
+        onBlockInsert={onBlockInsert}
+        onLayerDrop={handleDropLayer}
+        onZoomToLayer={zoomToLayer}
+        renderInfoboxInsertionPopup={renderInfoboxInsertionPopUp}
+      />
+      <FovSlider
+        visible={isCapturing && sceneMode && sceneMode !== "2d"}
+        onIsCapturingChange={onIsCapturingChange}
+        camera={camera}
+        onFovChange={onFovChange}
+      />
+    </>
+  );
+};
+
+export default CanvasArea;
diff --git a/web/src/beta/features/Visualizer/CanvasArea/type.ts b/web/src/beta/features/Visualizer/CanvasArea/type.ts
new file mode 100644
index 0000000000..b73eadd54b
--- /dev/null
+++ b/web/src/beta/features/Visualizer/CanvasArea/type.ts
@@ -0,0 +1,4 @@
+import { Item } from "@reearth/beta/components/ContentPicker";
+import { Block } from "@reearth/beta/core/Crust";
+
+export type BlockType = Item & Pick<Block, "pluginId" | "extensionId">;
diff --git a/web/src/beta/features/Visualizer/FovSlider/hooks.ts b/web/src/beta/features/Visualizer/FovSlider/hooks.ts
new file mode 100644
index 0000000000..f672df0284
--- /dev/null
+++ b/web/src/beta/features/Visualizer/FovSlider/hooks.ts
@@ -0,0 +1,31 @@
+import { useCallback } from "react";
+
+import { Camera } from "@reearth/beta/utils/value";
+
+type Params = {
+  onIsCapturingChange?: (isCapturing: boolean) => void;
+  camera?: Camera;
+  onFovChange?: (fov: number) => void;
+};
+
+export default ({ onIsCapturingChange, camera, onFovChange }: Params) => {
+  const finishCapture = useCallback(() => onIsCapturingChange?.(false), [onIsCapturingChange]);
+
+  const updateFov = useCallback(
+    (fov: number) => onFovChange?.(Math.max(0.01, Math.min(fov, Math.PI - 10 ** -10))),
+    [onFovChange],
+  );
+
+  const isAwayTarget = useCallback((e: Event) => {
+    const target = e.target as HTMLElement | null;
+    const popups = Array.from(document.querySelectorAll("[data-camera-popup]"));
+    return !popups.some(element => element.contains(target));
+  }, []);
+
+  const handleClickAway = useCallback(
+    (e: Event) => isAwayTarget(e) && finishCapture(),
+    [isAwayTarget, finishCapture],
+  );
+
+  return { camera, updateFov, handleClickAway };
+};
diff --git a/web/src/beta/features/Visualizer/FovSlider/index.tsx b/web/src/beta/features/Visualizer/FovSlider/index.tsx
new file mode 100644
index 0000000000..5d0c1d59c1
--- /dev/null
+++ b/web/src/beta/features/Visualizer/FovSlider/index.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+
+import FloatedPanel from "@reearth/beta/components/FloatedPanel";
+import Slider from "@reearth/beta/components/Slider";
+import Text from "@reearth/beta/components/Text";
+import { Camera } from "@reearth/beta/utils/value";
+import { useT } from "@reearth/services/i18n";
+import { styled, useTheme } from "@reearth/services/theme";
+
+import useHooks from "./hooks";
+
+type Props = {
+  visible?: boolean;
+  onIsCapturingChange?: (isCapturing: boolean) => void;
+  camera?: Camera;
+  onFovChange?: (fov: number) => void;
+};
+
+const FovSlider: React.FC<Props> = ({ visible, onIsCapturingChange, camera, onFovChange }) => {
+  const t = useT();
+
+  const { updateFov, handleClickAway } = useHooks({
+    onIsCapturingChange,
+    camera,
+    onFovChange,
+  });
+
+  const fov = camera?.fov && Math.round(camera?.fov * 1000) / 1000;
+  const theme = useTheme();
+  return (
+    <StyledFloatedPanel visible={visible} onClickAway={handleClickAway}>
+      <Wrapper data-camera-popup>
+        <FovField>
+          <Text size="xs" color={theme.main.strongText} otherProperties={{ marginRight: "16px" }}>
+            {t("Angle")}
+          </Text>
+          <FieldForm>
+            <FieldSlider>
+              <Slider
+                min={0.01}
+                max={Math.PI - 10 ** -10}
+                value={fov}
+                onChange={updateFov}
+                step={0.01}
+              />
+            </FieldSlider>
+            <FieldDescriptions>
+              <Text size="xs">{t("Narrow")}</Text>
+              <Text size="xs">{t("Wide")}</Text>
+            </FieldDescriptions>
+          </FieldForm>
+        </FovField>
+      </Wrapper>
+    </StyledFloatedPanel>
+  );
+};
+
+const StyledFloatedPanel = styled(FloatedPanel)`
+  top: 10px;
+  right: 10px;
+  z-index: ${props => props.theme.zIndexes.propertyFieldPopup};
+`;
+
+const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 220px;
+  background: ${({ theme }) => theme.slider.background};
+  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 5px;
+  padding: 10px;
+`;
+
+const FovField = styled.div`
+  display: flex;
+`;
+
+const FieldForm = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+`;
+
+const FieldSlider = styled.div`
+  display: flex;
+  flex: 1;
+  padding: 0 8px;
+`;
+
+const FieldDescriptions = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export default FovSlider;
diff --git a/web/src/beta/features/Visualizer/index.tsx b/web/src/beta/features/Visualizer/index.tsx
index 5aeb919ddd..c16175077e 100644
--- a/web/src/beta/features/Visualizer/index.tsx
+++ b/web/src/beta/features/Visualizer/index.tsx
@@ -1,12 +1,22 @@
 import { styled } from "@reearth/services/theme";
 
+import CanvasArea from "./CanvasArea";
+
 const Visualizer: React.FC = () => {
-  return <Wrapper>Visualizer</Wrapper>;
+  return (
+    <Wrapper>
+      <CanvasArea isBuilt={false} inEditor={true} />
+    </Wrapper>
+  );
 };
 
 export default Visualizer;
 
 const Wrapper = styled.div`
   background: #3f3d45;
-  flex: 1;
+  display: flex;
+  flex-flow: column;
+  flex: auto;
+  width: 100%;
+  height: 100%;
 `;
diff --git a/web/src/beta/pages/Editor/index.tsx b/web/src/beta/pages/Editor/index.tsx
index a8cfef4d09..30626d5e42 100644
--- a/web/src/beta/pages/Editor/index.tsx
+++ b/web/src/beta/pages/Editor/index.tsx
@@ -1,10 +1,11 @@
 import { useParams } from "react-router-dom";
 
+import NotFound from "@reearth/beta/components/NotFound";
 import LeftPanel from "@reearth/beta/features/LeftPanel";
 import Navbar, { isTab } from "@reearth/beta/features/Navbar";
 import RightPanel from "@reearth/beta/features/RightPanel";
 import Visualizer from "@reearth/beta/features/Visualizer";
-import NotFound from "@reearth/classic/components/atoms/NotFound";
+import { Provider as DndProvider } from "@reearth/beta/utils/use-dnd";
 import { styled } from "@reearth/services/theme";
 
 type Props = {};
@@ -17,14 +18,16 @@ const Editor: React.FC<Props> = () => {
   }
 
   return (
-    <Wrapper>
-      <Navbar sceneId={sceneId} currentTab={tab} />
-      <MainSection>
-        <LeftPanel />
-        <Visualizer />
-        <RightPanel />
-      </MainSection>
-    </Wrapper>
+    <DndProvider>
+      <Wrapper>
+        <Navbar sceneId={sceneId} currentTab={tab} />
+        <MainSection>
+          <LeftPanel />
+          <Visualizer />
+          <RightPanel />
+        </MainSection>
+      </Wrapper>
+    </DndProvider>
   );
 };
 
@@ -34,9 +37,12 @@ const Wrapper = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
+  width: 100%;
 `;
 
 const MainSection = styled.div`
   display: flex;
   flex: 1;
+  height: 100%;
+  width: 100%;
 `;
diff --git a/web/src/beta/utils/aria.test.ts b/web/src/beta/utils/aria.test.ts
new file mode 100644
index 0000000000..0d8f7557c5
--- /dev/null
+++ b/web/src/beta/utils/aria.test.ts
@@ -0,0 +1,18 @@
+import { expect, test } from "vitest";
+
+import { ariaProps } from "./aria";
+
+test("get aria props", () => {
+  expect(ariaProps(1)).toEqual({});
+  expect(
+    ariaProps({
+      a: 1,
+      "aria-hidden": "true",
+      ariaExpanded: false,
+      "aria-hoge": "false",
+    }),
+  ).toEqual({
+    "aria-hidden": "true",
+    "aria-expanded": false,
+  });
+});
diff --git a/web/src/beta/utils/aria.ts b/web/src/beta/utils/aria.ts
new file mode 100644
index 0000000000..aacd100e55
--- /dev/null
+++ b/web/src/beta/utils/aria.ts
@@ -0,0 +1,63 @@
+import { AriaAttributes } from "react";
+
+export function ariaProps(props: unknown): AriaAttributes {
+  if (typeof props !== "object" || !props) return {};
+  return Object.fromEntries(
+    Object.entries(props)
+      .filter(([k]) => typeof k === "string" && k.startsWith("aria"))
+      .map(([k, v]) => [k.replace(/^aria-?/, "").toLowerCase(), v])
+      .filter(([k]) => typeof k === "string" && keys.has(k))
+      .map(([k, v]) => [`aria-${k}`, v]),
+  );
+}
+
+const keys = new Set([
+  "activedescendant",
+  "atomic",
+  "autocomplete",
+  "busy",
+  "checked",
+  "colcount",
+  "colindex",
+  "colspan",
+  "controls",
+  "current",
+  "describedby",
+  "details",
+  "disabled",
+  "dropeffect",
+  "errormessage",
+  "expanded",
+  "flowto",
+  "grabbed",
+  "haspopup",
+  "hidden",
+  "invalid",
+  "keyshortcuts",
+  "label",
+  "labelledby",
+  "level",
+  "live",
+  "modal",
+  "multiline",
+  "multiselectable",
+  "orientation",
+  "owns",
+  "placeholder",
+  "posinset",
+  "pressed",
+  "readonly",
+  "relevant",
+  "required",
+  "roledescription",
+  "rowcount",
+  "rowindex",
+  "rowspan",
+  "selected",
+  "setsize",
+  "sort",
+  "valuemax",
+  "valuemin",
+  "valuenow",
+  "valuetext",
+]);
diff --git a/web/src/beta/utils/generate-random-string.ts b/web/src/beta/utils/generate-random-string.ts
new file mode 100644
index 0000000000..43255a4cef
--- /dev/null
+++ b/web/src/beta/utils/generate-random-string.ts
@@ -0,0 +1,9 @@
+const usableChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
+const generateRandomString = (len: number): string => {
+  return Array.from(window.crypto.getRandomValues(new Uint8Array(len)))
+    .map(n => usableChars[n % len])
+    .join("")
+    .toLowerCase();
+};
+
+export default generateRandomString;
diff --git a/web/src/beta/utils/idle.ts b/web/src/beta/utils/idle.ts
new file mode 100644
index 0000000000..b8386f9e71
--- /dev/null
+++ b/web/src/beta/utils/idle.ts
@@ -0,0 +1,22 @@
+const ctx = typeof window !== "undefined" ? window : global;
+const requestIdleCallbackShim = (
+  callback: (arg0: { didTimeout: boolean; timeRemaining: () => number }) => void,
+  _options?: IdleRequestOptions,
+) => {
+  const start = Date.now();
+  return ctx.setTimeout(function () {
+    callback({
+      didTimeout: false,
+      timeRemaining: function () {
+        return Math.max(0, 12 - (Date.now() - start));
+      },
+    });
+  });
+};
+const requestIdleCallback = ctx.requestIdleCallback || requestIdleCallbackShim;
+
+// This is used to schedule heavy required task at idle time.
+// But this task is required to advance process, so we want to execute it as fast as possible.
+export const requestIdleCallbackWithRequiredWork = (cb: () => void) => {
+  requestIdleCallback(cb, { timeout: 1 });
+};
diff --git a/web/src/beta/utils/image.ts b/web/src/beta/utils/image.ts
new file mode 100644
index 0000000000..69f2e5b6e4
--- /dev/null
+++ b/web/src/beta/utils/image.ts
@@ -0,0 +1,35 @@
+import { useState, useEffect, useMemo, useRef } from "react";
+
+export const useImage = (src?: string): HTMLImageElement | undefined => {
+  const imgRef = useRef<HTMLImageElement>();
+  const [img, setImg] = useState<HTMLImageElement>();
+
+  useEffect(() => {
+    if (!src) {
+      setImg(undefined);
+      if (imgRef.current) {
+        imgRef.current.src = "";
+      }
+      return;
+    }
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => {
+      setImg(imgRef.current);
+    };
+    img.src = src;
+    imgRef.current = img;
+  }, [src]);
+
+  return img;
+};
+
+export const useCanvas = (cb: (canvas: HTMLCanvasElement) => void): string => {
+  const can = useMemo(() => document.createElement("canvas"), []);
+  const [data, setData] = useState<string>("");
+  useEffect(() => {
+    cb(can);
+    setData(can.toDataURL());
+  }, [can, cb]);
+  return data;
+};
diff --git a/web/src/beta/utils/object.test.ts b/web/src/beta/utils/object.test.ts
new file mode 100644
index 0000000000..cfebf786c7
--- /dev/null
+++ b/web/src/beta/utils/object.test.ts
@@ -0,0 +1,82 @@
+import { expect, test, vi } from "vitest";
+
+import { delayedObject, merge, objectFromGetter } from "./object";
+
+test("delayedObject", () => {
+  const obj = { a: [], b: { a: 1 }, c: "a" };
+  const obj2 = delayedObject(obj, ["c"]);
+
+  expect(obj2).toStrictEqual(obj);
+
+  const a = Object.getOwnPropertyDescriptor(obj2, "a");
+  const b = Object.getOwnPropertyDescriptor(obj2, "b");
+  const c = Object.getOwnPropertyDescriptor(obj2, "c");
+
+  expect(a?.get).toBeInstanceOf(Function);
+  expect(b?.get).toBeInstanceOf(Function);
+  expect(c?.value).toBe("a");
+
+  expect(() => {
+    (obj2 as any).a = [];
+  }).toThrowError("Cannot set property");
+  expect(() => {
+    (obj2 as any).b = { a: 2 };
+  }).toThrowError("Cannot set property");
+  expect(() => {
+    (obj2 as any).c = "b";
+  }).toThrowError("Cannot assign to read only property");
+  expect(obj2).toStrictEqual(obj);
+});
+
+test("objectFromGetter", () => {
+  const fn = vi.fn((k: "a" | "b"): "a!" | "b!" => (k === "a" ? "a!" : "b!"));
+  const obj = objectFromGetter<{ a: "a!"; b: "b!" }>(["a", "b"], fn);
+
+  expect(obj.a).toBe("a!");
+  expect(fn).toBeCalledWith("a");
+  expect(fn).toBeCalledTimes(1);
+  expect(obj.b).toBe("b!");
+  expect(fn).toBeCalledWith("b");
+  expect(fn).toBeCalledTimes(2);
+  expect(obj).toEqual({ a: "a!", b: "b!" });
+  expect(Object.keys(obj)).toEqual(["a", "b"]);
+
+  const a = Object.getOwnPropertyDescriptor(obj, "a");
+  const b = Object.getOwnPropertyDescriptor(obj, "b");
+  expect(a?.get).toBeInstanceOf(Function);
+  expect(b?.get).toBeInstanceOf(Function);
+
+  expect(() => {
+    (obj as any).a = "";
+  }).toThrowError("Cannot set property");
+  expect(() => {
+    (obj as any).b = "";
+  }).toThrowError("Cannot set property");
+});
+
+test("merge", () => {
+  const o = merge(
+    {
+      get a() {
+        return 1;
+      },
+      b: 2,
+    },
+    {
+      get c() {
+        return 3;
+      },
+    },
+  );
+  expect(o).toEqual({ a: 1, b: 2, c: 3 });
+  expect(Object.getOwnPropertyDescriptor(o, "a")?.get).toBeInstanceOf(Function);
+  expect(Object.getOwnPropertyDescriptor(o, "b")?.get).toBeUndefined();
+  expect(Object.getOwnPropertyDescriptor(o, "c")?.get).toBeInstanceOf(Function);
+
+  expect(() => {
+    (o as any).a = "";
+  }).toThrowError("Cannot set property");
+  expect(() => {
+    (o as any).c = "";
+  }).toThrowError("Cannot set property");
+});
diff --git a/web/src/beta/utils/object.ts b/web/src/beta/utils/object.ts
new file mode 100644
index 0000000000..998fe595c9
--- /dev/null
+++ b/web/src/beta/utils/object.ts
@@ -0,0 +1,70 @@
+export function delayedObject<T extends {}>(obj: T, excludedKeys?: string[]): Readonly<T> {
+  const res: any = {};
+  const descs = Object.keys(obj).reduce<PropertyDescriptorMap>(
+    (a, b) => ({
+      ...a,
+      [b]: excludedKeys?.includes(b)
+        ? {
+            value: (obj as any)[b],
+            configurable: false,
+            enumerable: true,
+            writable: false,
+          }
+        : {
+            get() {
+              return (obj as any)[b];
+            },
+            configurable: false,
+            enumerable: true,
+          },
+    }),
+    {},
+  );
+  Object.defineProperties(res, descs);
+  return res;
+}
+
+export function objectFromGetter<T extends { [K in keyof T]: any }>(
+  keys: (keyof T)[],
+  fn: (this: T, key: keyof T) => T[keyof T],
+): Readonly<T> {
+  const res: any = {};
+  const descs = keys.reduce<PropertyDescriptorMap>(
+    (a, b) => ({
+      ...a,
+      [b]: {
+        get(this: any): any {
+          return fn.call(this, b);
+        },
+        configurable: false,
+        enumerable: true,
+      },
+    }),
+    {},
+  );
+  Object.defineProperties(res, descs);
+  return res;
+}
+
+export function clone<T>(obj: T): T {
+  const obj2: any = {};
+  Object.defineProperties(obj2, Object.getOwnPropertyDescriptors(obj));
+  return obj2;
+}
+
+type BoxedTupleTypes<T extends any[]> = { [P in keyof T]: [T[P]] }[Exclude<keyof T, keyof any[]>];
+type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (k: infer I) => void
+  ? I
+  : never;
+type UnboxIntersection<T> = T extends { 0: infer U } ? U : never;
+
+export function merge<O, P extends any[]>(
+  o1: O,
+  ...o2: P
+): O & UnboxIntersection<UnionToIntersection<BoxedTupleTypes<P>>> {
+  const obj: any = clone(o1);
+  for (const o of o2) {
+    Object.defineProperties(obj, Object.getOwnPropertyDescriptors(o));
+  }
+  return obj;
+}
diff --git a/web/src/beta/utils/raf.test.ts b/web/src/beta/utils/raf.test.ts
new file mode 100644
index 0000000000..8492a013a3
--- /dev/null
+++ b/web/src/beta/utils/raf.test.ts
@@ -0,0 +1,134 @@
+import { describe, expect, test, vi } from "vitest";
+
+import { interval, intervalDuring, tweenInterval } from "./raf";
+
+describe("interval", () => {
+  test("regular", () => {
+    vi.useFakeTimers();
+    const requestAnimationFrame = vi.spyOn(window, "requestAnimationFrame");
+    const cancelAnimationFrame = vi.spyOn(window, "cancelAnimationFrame");
+
+    let count = 0;
+    const cb = vi.fn<[number], boolean>(() => ++count <= 3);
+    interval(cb);
+
+    expect(cb).toBeCalledTimes(0);
+    expect(requestAnimationFrame).toBeCalledTimes(1);
+    expect(cancelAnimationFrame).toBeCalledTimes(0);
+
+    vi.advanceTimersByTime(100);
+
+    expect(cb).toBeCalledTimes(4);
+    expect(cb.mock.calls[0][0]).toBe(0);
+    for (let i = 1; i < cb.mock.calls.length; i++) {
+      expect(cb.mock.calls[i][0]).toBeGreaterThan(cb.mock.calls[i - 1][0]);
+    }
+    expect(requestAnimationFrame).toBeCalledTimes(4);
+    expect(cancelAnimationFrame).toBeCalledTimes(0);
+  });
+
+  test("cancel", () => {
+    vi.useFakeTimers();
+    const requestAnimationFrame = vi.spyOn(window, "requestAnimationFrame");
+    const cancelAnimationFrame = vi.spyOn(window, "cancelAnimationFrame");
+
+    const cb = vi.fn();
+    const cancel = interval(cb);
+
+    expect(cb).toBeCalledTimes(0);
+    expect(requestAnimationFrame).toBeCalledTimes(1);
+    expect(cancelAnimationFrame).toBeCalledTimes(0);
+
+    cancel();
+
+    expect(cancelAnimationFrame).toBeCalledTimes(1);
+    const requestId = requestAnimationFrame.mock.results[0].value;
+    expect(cancelAnimationFrame).toBeCalledWith(requestId);
+
+    vi.advanceTimersByTime(50);
+
+    expect(cb).toBeCalledTimes(0);
+  });
+
+  test("delay", () => {
+    vi.useFakeTimers();
+    const setTimeout = vi.spyOn(window, "setTimeout");
+    const requestAnimationFrame = vi.spyOn(window, "requestAnimationFrame");
+    const cancelAnimationFrame = vi.spyOn(window, "cancelAnimationFrame");
+
+    const cb = vi.fn();
+    interval(cb, 500);
+
+    expect(cb).toBeCalledTimes(0);
+    expect(setTimeout).toBeCalledTimes(1);
+    expect(requestAnimationFrame).toBeCalledTimes(0);
+    expect(cancelAnimationFrame).toBeCalledTimes(0);
+
+    vi.advanceTimersByTime(400);
+    expect(cb).toBeCalledTimes(0);
+
+    vi.advanceTimersByTime(200);
+    expect(cb).toBeCalledTimes(1);
+    expect(requestAnimationFrame).toBeCalledTimes(0);
+  });
+});
+
+test("intervalDuring", () => {
+  vi.useFakeTimers();
+  const requestAnimationFrame = vi.spyOn(window, "requestAnimationFrame");
+  const cancelAnimationFrame = vi.spyOn(window, "cancelAnimationFrame");
+  const cb = vi.fn();
+  intervalDuring(cb, 100);
+
+  expect(cb).toBeCalledTimes(0);
+  expect(requestAnimationFrame).toBeCalledTimes(1);
+  expect(cancelAnimationFrame).toBeCalledTimes(0);
+
+  vi.advanceTimersByTime(200);
+
+  const times = cb.mock.calls.length;
+  expect(requestAnimationFrame).toBeCalledTimes(times);
+  expect(cancelAnimationFrame).toBeCalledTimes(0);
+
+  expect(cb.mock.calls[0][0]).toBe(0);
+  expect(cb.mock.calls[cb.mock.calls.length - 1][0]).toBe(1);
+  for (let i = 1; i < cb.mock.calls.length; i++) {
+    expect(cb.mock.calls[i][0]).toBeGreaterThan(cb.mock.calls[i - 1][0]);
+  }
+
+  vi.advanceTimersByTime(100);
+
+  // cb will not be called after intervalDuring ends
+  expect(cb).toBeCalledTimes(times);
+});
+
+test("tweenInterval", () => {
+  vi.useFakeTimers();
+  const requestAnimationFrame = vi.spyOn(window, "requestAnimationFrame");
+  const cancelAnimationFrame = vi.spyOn(window, "cancelAnimationFrame");
+  const cb = vi.fn();
+  tweenInterval(cb, "cubic", 100);
+
+  expect(cb).toBeCalledTimes(0);
+  expect(requestAnimationFrame).toBeCalledTimes(1);
+  expect(cancelAnimationFrame).toBeCalledTimes(0);
+
+  vi.advanceTimersByTime(200);
+
+  const times = cb.mock.calls.length;
+  expect(requestAnimationFrame).toBeCalledTimes(times);
+  expect(cancelAnimationFrame).toBeCalledTimes(0);
+
+  expect(cb.mock.calls[0][0]).toBe(0);
+  expect(cb.mock.calls[0][1]).toBe(0);
+  expect(cb.mock.calls[cb.mock.calls.length - 1][0]).toBe(1);
+  expect(cb.mock.calls[cb.mock.calls.length - 1][1]).toBe(1);
+  for (let i = 1; i < cb.mock.calls.length; i++) {
+    expect(cb.mock.calls[i][1]).toBeGreaterThan(cb.mock.calls[i - 1][1]);
+  }
+
+  vi.advanceTimersByTime(100);
+
+  // cb will not be called after intervalDuring ends
+  expect(cb).toBeCalledTimes(times);
+});
diff --git a/web/src/beta/utils/raf.ts b/web/src/beta/utils/raf.ts
new file mode 100644
index 0000000000..f6ae60cfb1
--- /dev/null
+++ b/web/src/beta/utils/raf.ts
@@ -0,0 +1,58 @@
+import { easing as tweenEasing, IEasingMap } from "ts-easing";
+
+export type Easing = keyof IEasingMap;
+
+export function interval(callback: (t: number) => boolean, delay?: number): () => void {
+  let prev = 0;
+  let raf = 0;
+  let to = 0;
+
+  const cb = () => {
+    if (callback(prev === 0 ? 0 : Date.now() - prev)) {
+      raf = window.requestAnimationFrame(cb);
+    }
+    if (prev === 0) {
+      prev = Date.now();
+    }
+  };
+
+  if (typeof delay === "number") {
+    to = window.setTimeout(cb, delay);
+  } else {
+    raf = window.requestAnimationFrame(cb);
+  }
+
+  return () => {
+    window.clearTimeout(to);
+    window.cancelAnimationFrame(raf);
+  };
+}
+
+export function intervalDuring(
+  callback: (time: number) => void,
+  duration: number,
+  delay?: number,
+): () => void {
+  if (duration < 0) return () => {};
+  return interval(d => {
+    const t = Math.min(1, duration === 0 ? 1 : d / duration);
+    callback(t);
+    return t < 1;
+  }, delay);
+}
+
+export function tweenInterval(
+  callback: (v: number, t: number) => void,
+  easing: Easing | ((t: number) => number),
+  duration: number,
+  delay?: number,
+): () => void {
+  const e = typeof easing === "function" ? easing : tweenEasing[easing];
+  return intervalDuring(
+    d => {
+      callback(e(d), d);
+    },
+    duration,
+    delay,
+  );
+}
diff --git a/web/src/beta/utils/time.ts b/web/src/beta/utils/time.ts
new file mode 100644
index 0000000000..eaeec87dd3
--- /dev/null
+++ b/web/src/beta/utils/time.ts
@@ -0,0 +1,15 @@
+export const convertTime = (time: string | undefined): Date | undefined => {
+  if (!time) return;
+
+  try {
+    return new Date(time);
+  } catch {
+    return undefined;
+  }
+};
+
+export const truncMinutes = (d: Date) => {
+  d.setMinutes(0);
+  d.setSeconds(0, 0);
+  return d;
+};
diff --git a/web/src/beta/utils/use-buffered.ts b/web/src/beta/utils/use-buffered.ts
new file mode 100644
index 0000000000..d92521a3a0
--- /dev/null
+++ b/web/src/beta/utils/use-buffered.ts
@@ -0,0 +1,11 @@
+import { useRef } from "react";
+
+const useBuffered = <T>(state: T, dep: boolean): T => {
+  const bufferedState = useRef(state);
+  if (dep) {
+    bufferedState.current = state;
+  }
+  return bufferedState.current;
+};
+
+export default useBuffered;
diff --git a/web/src/beta/utils/use-delayed-count.test.ts b/web/src/beta/utils/use-delayed-count.test.ts
new file mode 100644
index 0000000000..63119c34ba
--- /dev/null
+++ b/web/src/beta/utils/use-delayed-count.test.ts
@@ -0,0 +1,139 @@
+import { renderHook, act } from "@testing-library/react";
+import { expect, test, vi } from "vitest";
+
+import { useDelayedCount } from "./use-delayed-count";
+
+test("normal", async () => {
+  vi.useFakeTimers();
+
+  const { result } = renderHook(() => useDelayedCount([100, 200, 300]));
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(undefined);
+
+  act(() => {
+    result.current[2](true);
+  });
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(undefined);
+
+  act(() => {
+    result.current[2](false);
+  });
+  expect(result.current[0]).toBe(1);
+  expect(result.current[1]).toBe(0);
+
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(2);
+  expect(result.current[1]).toBe(1);
+
+  act(() => {
+    vi.advanceTimersByTime(200);
+  });
+  expect(result.current[0]).toBe(3);
+  expect(result.current[1]).toBe(2);
+
+  act(() => {
+    vi.advanceTimersByTime(300);
+  });
+  expect(result.current[0]).toBe(4);
+  expect(result.current[1]).toBe(3);
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(4);
+  expect(result.current[1]).toBe(3);
+
+  act(() => {
+    result.current[2](false);
+  });
+  expect(result.current[0]).toBe(4);
+  expect(result.current[1]).toBe(3);
+
+  act(() => {
+    result.current[2](true);
+  });
+  expect(result.current[0]).toBe(3);
+  expect(result.current[1]).toBe(4);
+
+  act(() => {
+    vi.advanceTimersByTime(300);
+  });
+  expect(result.current[0]).toBe(2);
+  expect(result.current[1]).toBe(3);
+
+  act(() => {
+    vi.advanceTimersByTime(200);
+  });
+  expect(result.current[0]).toBe(1);
+  expect(result.current[1]).toBe(2);
+
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(1);
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(1);
+});
+
+test("different durations", async () => {
+  vi.useFakeTimers();
+
+  const { result } = renderHook(() => useDelayedCount([[100, 300]]));
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(undefined);
+
+  act(() => {
+    result.current[2](false);
+  });
+  expect(result.current[0]).toBe(1);
+  expect(result.current[1]).toBe(0);
+
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(2);
+  expect(result.current[1]).toBe(1);
+
+  act(() => {
+    result.current[2](true);
+  });
+  expect(result.current[0]).toBe(1);
+  expect(result.current[1]).toBe(2);
+
+  act(() => {
+    vi.advanceTimersByTime(100);
+  });
+  expect(result.current[0]).toBe(1);
+  expect(result.current[1]).toBe(2);
+  act(() => {
+    vi.advanceTimersByTime(200);
+  });
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(1);
+});
+
+test("skip", async () => {
+  vi.useFakeTimers();
+
+  const { result } = renderHook(() => useDelayedCount([100, 200, 300]));
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(undefined);
+
+  act(() => {
+    result.current[2](false, true);
+  });
+  expect(result.current[0]).toBe(4);
+  expect(result.current[1]).toBe(0);
+
+  act(() => {
+    result.current[2](true, true);
+  });
+  expect(result.current[0]).toBe(0);
+  expect(result.current[1]).toBe(4);
+});
diff --git a/web/src/beta/utils/use-delayed-count.ts b/web/src/beta/utils/use-delayed-count.ts
new file mode 100644
index 0000000000..99d51777f1
--- /dev/null
+++ b/web/src/beta/utils/use-delayed-count.ts
@@ -0,0 +1,65 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+import { usePreviousDistinct } from "react-use";
+
+export type Durations =
+  | [number | null | undefined, number | null | undefined][]
+  | (number | null | undefined)[];
+
+export const useDelayedCount = (durations: Durations = []) => {
+  const [mode, setMode] = useState(0);
+  const prevMode = usePreviousDistinct(mode);
+  const exit = useRef(false);
+  const timeout = useRef<number>();
+
+  const advanceMode = useCallback(() => {
+    setMode(m => Math.max(0, Math.min(durations.length + 1, m + (exit.current ? -1 : 1))));
+  }, [durations.length]);
+
+  const startTransition = useCallback(
+    (e: boolean, skipAnimation?: boolean) => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+        timeout.current = undefined;
+      }
+
+      if (skipAnimation) {
+        setMode(e ? 0 : durations.length + 1);
+        return;
+      }
+
+      exit.current = e;
+      advanceMode();
+    },
+    [advanceMode, durations.length],
+  );
+
+  useEffect(() => {
+    if (timeout.current !== undefined) {
+      clearTimeout(timeout.current);
+      timeout.current = undefined;
+    }
+
+    if (mode <= 0 || mode >= durations.length + 1) return;
+
+    const next = durations?.[mode - 1];
+    const duration = Array.isArray(next) ? next[exit.current ? 1 : 0] : next;
+
+    timeout.current = window.setTimeout(() => {
+      timeout.current = undefined;
+      advanceMode();
+    }, duration ?? 0);
+  }, [advanceMode, durations, mode]);
+
+  // clear timeout on unmount
+  useEffect(
+    () => () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+        timeout.current = undefined;
+      }
+    },
+    [],
+  );
+
+  return [mode, prevMode, startTransition] as const;
+};
diff --git a/web/src/beta/utils/use-dnd/drag.ts b/web/src/beta/utils/use-dnd/drag.ts
new file mode 100644
index 0000000000..b9c003b29b
--- /dev/null
+++ b/web/src/beta/utils/use-dnd/drag.ts
@@ -0,0 +1,34 @@
+import { useMemo } from "react";
+import { useDrag as useDndDrag, DragSourceHookSpec } from "react-dnd";
+
+import { Item, ItemType, Dropper } from "./types";
+
+export const useDrag = <T extends ItemType = ItemType>(
+  item: Item<T> | undefined,
+  disabled?: boolean,
+  end?: (item: Item<T>, dropper?: Dropper) => void,
+) => {
+  const options = useMemo<
+    DragSourceHookSpec<
+      Item<T> | Item<"null">,
+      unknown,
+      {
+        isDragging: boolean;
+      }
+    >
+  >(
+    () => ({
+      type: item?.type ?? "null",
+      item: item ?? { type: "null" },
+      canDrag: !!item && !disabled,
+      end: (item, monitor) => end?.(item as Item<T>, monitor.getDropResult() ?? undefined),
+      collect: monitor => ({
+        isDragging: monitor.isDragging(),
+      }),
+    }),
+    [disabled, end, item],
+  );
+
+  const [{ isDragging }, ref, previewRef] = useDndDrag(options);
+  return { ref, isDragging, previewRef };
+};
diff --git a/web/src/beta/utils/use-dnd/drop.ts b/web/src/beta/utils/use-dnd/drop.ts
new file mode 100644
index 0000000000..b8cc40e8e7
--- /dev/null
+++ b/web/src/beta/utils/use-dnd/drop.ts
@@ -0,0 +1,93 @@
+import { useMemo, useCallback } from "react";
+import { useDrop as useDndDrop, DropTargetHookSpec, DropTargetMonitor } from "react-dnd";
+
+import { Item, ItemType, Dropper } from "./types";
+
+export { DndProvider as Provider } from "react-dnd";
+
+export type Context = {
+  position?: { x: number; y: number; w: number; h: number };
+  canDrop: boolean;
+};
+
+export type DropOptions<T extends ItemType = ItemType, E extends HTMLElement = HTMLElement> = {
+  accept: T | T[];
+  canDrop?: (item: Item<T>) => boolean;
+  hover?: (item: Item<T>, context: Context) => void;
+  drop?: (item: Item<T>, context: Context) => Dropper | undefined;
+  shallow?: boolean;
+  disabled?: boolean;
+  wrapperRef?: React.RefObject<E>;
+};
+
+export const useDrop = <T extends ItemType = ItemType, E extends HTMLElement = HTMLElement>({
+  accept,
+  hover,
+  canDrop,
+  drop,
+  shallow,
+  disabled,
+  wrapperRef,
+}: DropOptions<T, E>) => {
+  const calcContext = useCallback(
+    (monitor: DropTargetMonitor) => {
+      const offset = wrapperRef?.current ? monitor.getClientOffset() : undefined;
+      const wrapperOffset = wrapperRef?.current
+        ? wrapperRef.current.getBoundingClientRect()
+        : undefined;
+      const position =
+        offset && wrapperOffset
+          ? {
+              x: offset.x - wrapperOffset.left,
+              y: offset.y - wrapperOffset.top,
+              w: wrapperOffset.width,
+              h: wrapperOffset.height,
+            }
+          : undefined;
+      return {
+        canDrop: monitor.canDrop(),
+        position,
+      };
+    },
+    [wrapperRef],
+  );
+
+  const options = useMemo<
+    DropTargetHookSpec<
+      Item<T>,
+      Dropper,
+      {
+        isOver: boolean;
+        canDrop: boolean;
+        isDroppable: boolean;
+        isNotDroppable: boolean;
+      }
+    >
+  >(
+    () => ({
+      accept,
+      hover: hover
+        ? (item: Item<T>, monitor) => {
+            hover(item, calcContext(monitor));
+          }
+        : undefined,
+      canDrop: (item: Item<T>, monitor) =>
+        !disabled && (!shallow || monitor.isOver({ shallow: true })) && (!canDrop || canDrop(item)),
+      drop: drop ? (item: Item<T>, monitor) => drop(item, calcContext(monitor)) : undefined,
+      collect(monitor) {
+        const isOver = monitor.isOver({ shallow });
+        const canDrop = monitor.canDrop();
+        return {
+          isOver,
+          canDrop,
+          isDroppable: isOver && canDrop,
+          isNotDroppable: isOver && !canDrop,
+        };
+      },
+    }),
+    [accept, calcContext, canDrop, disabled, drop, hover, shallow],
+  );
+
+  const [{ isOver, canDrop: canDrop2, isDroppable, isNotDroppable }, ref] = useDndDrop(options);
+  return { ref, isOver, canDrop: canDrop2, isDroppable, isNotDroppable };
+};
diff --git a/web/src/beta/utils/use-dnd/index.tsx b/web/src/beta/utils/use-dnd/index.tsx
new file mode 100644
index 0000000000..7aee95d66f
--- /dev/null
+++ b/web/src/beta/utils/use-dnd/index.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+import { DndProvider, useDragLayer } from "react-dnd";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+import { ItemType } from "./types";
+
+export * from "./types";
+export * from "./drag";
+export * from "./drop";
+
+export const Provider: React.FC<{ children?: ReactNode }> = ({ children }) => (
+  <DndProvider backend={HTML5Backend}>{children}</DndProvider>
+);
+
+export const useDraggingItemType = () =>
+  useDragLayer(monitor => (monitor.isDragging() ? (monitor.getItemType() as ItemType) : null));
diff --git a/web/src/beta/utils/use-dnd/types.ts b/web/src/beta/utils/use-dnd/types.ts
new file mode 100644
index 0000000000..c8e462d8cb
--- /dev/null
+++ b/web/src/beta/utils/use-dnd/types.ts
@@ -0,0 +1,47 @@
+export type ItemType = "layerItem" | "layerGroup" | "primitive" | "block" | "null";
+
+export type Item<T extends ItemType = ItemType> = {
+  null: { type: "null" };
+  layerItem: {
+    type: "layerItem";
+    layerId: string;
+    parentLayerId: string;
+    index: number;
+  };
+  layerGroup: {
+    type: "layerGroup";
+    layerId: string;
+    parentLayerId: string;
+    index: number;
+  };
+  primitive: { type: "primitive" };
+  block: {
+    type: "block";
+    id: string;
+    index: number;
+  };
+}[T];
+
+export type DropperType = "earth" | "layer" | "block";
+
+export type Dropper<T extends DropperType = DropperType> = {
+  earth: {
+    type: "earth";
+    layerId: string;
+    position?: {
+      lat: number;
+      lng: number;
+      height: number;
+    };
+  };
+  layer: {
+    type: "layer";
+    layerId: string;
+    index?: number;
+  };
+  block: {
+    type: "block";
+    id: string;
+    index: number;
+  };
+}[T];
diff --git a/web/src/beta/utils/util.test.ts b/web/src/beta/utils/util.test.ts
new file mode 100644
index 0000000000..00b2953b6b
--- /dev/null
+++ b/web/src/beta/utils/util.test.ts
@@ -0,0 +1,8 @@
+import { expect, test } from "vitest";
+
+import { partitionObject } from "./util";
+
+test("partition object", () => {
+  const actual = partitionObject({ a: 1, b: 2 }, ["a"]);
+  expect(actual).toStrictEqual([{ a: 1 }, { b: 2 }]);
+});
diff --git a/web/src/beta/utils/util.ts b/web/src/beta/utils/util.ts
new file mode 100644
index 0000000000..7c16bfae15
--- /dev/null
+++ b/web/src/beta/utils/util.ts
@@ -0,0 +1,50 @@
+import { Args, Args3, Args2 } from "@reearth/types";
+
+/**
+ * Often we want to make an array of keys of an object type,
+ * but if we just specify the key names directly, we may forget to change the array if the object type is changed.
+ * With this function, the compiler checks the object keys for completeness, so the array of keys is always up to date.
+ */
+export const objKeys = <T>(obj: { [k in keyof T]: 0 }): (keyof T)[] => {
+  return Object.keys(obj) as (keyof T)[];
+};
+
+export const isPresent = <V>(v: V | undefined): v is V => typeof v !== "undefined";
+
+export const partitionObject = <T extends {}, K extends keyof T>(
+  obj: T,
+  keys: K[],
+): [Pick<T, K>, Omit<T, K>] => {
+  const a: any = {};
+  const b: any = {};
+  for (const k of Object.keys(obj)) {
+    if (keys.includes(k as K)) {
+      a[k] = obj[k as K];
+    } else {
+      b[k] = obj[k as K];
+    }
+  }
+  return [a, b];
+};
+
+export const bindFunc = <F extends (a: A, ...args: any[]) => any, A>(f?: F, a?: A) =>
+  isPresent(f) && isPresent(a) ? (...args: Args<F>) => f(a, ...args) : undefined;
+
+export const bindFunc2 = <F extends (a: A, b: B, ...args: any[]) => any, A, B>(
+  f?: F,
+  a?: A,
+  b?: B,
+) =>
+  isPresent(f) && isPresent(a) && isPresent(b)
+    ? (...args: Args2<F>) => f(a, b, ...args)
+    : undefined;
+
+export const bindFunc3 = <F extends (a: A, b: B, c: C, ...args: any[]) => any, A, B, C>(
+  f?: F,
+  a?: A,
+  b?: B,
+  c?: C,
+) =>
+  isPresent(f) && isPresent(a) && isPresent(b) && isPresent(c)
+    ? (...args: Args3<F>) => f(a, b, c, ...args)
+    : undefined;
diff --git a/web/src/beta/utils/value.ts b/web/src/beta/utils/value.ts
new file mode 100644
index 0000000000..4fe83896ee
--- /dev/null
+++ b/web/src/beta/utils/value.ts
@@ -0,0 +1,219 @@
+import { Color } from "cesium";
+
+import { ValueType as GQLValueType } from "@reearth/services/gql";
+import { css } from "@reearth/services/theme";
+
+export type LatLng = {
+  lat: number;
+  lng: number;
+};
+
+export type LatLngHeight = {
+  lat: number;
+  lng: number;
+  height: number;
+};
+
+export type Camera = {
+  lat: number;
+  lng: number;
+  height: number;
+  heading: number;
+  pitch: number;
+  roll: number;
+  fov: number;
+};
+
+export type Typography = {
+  fontFamily?: string;
+  fontSize?: number;
+  fontWeight?: number;
+  color?: string;
+  textAlign?: "left" | "center" | "right" | "justify" | "justify_all";
+  bold?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+};
+
+export type Coordinates = LatLngHeight[];
+
+export type Polygon = LatLngHeight[][];
+
+export type Rect = {
+  west: number;
+  south: number;
+  east: number;
+  north: number;
+};
+
+// Ideal for plugin developers, but it's hard to implement it with Cesium
+export type Plane = {
+  location: LatLngHeight;
+  width: number;
+  height: number;
+  length: number;
+  heading: number;
+  pitch: number;
+};
+
+// Familiar with Cesium
+export type EXPERIMENTAL_clipping = {
+  planes?: {
+    normal: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    distance: number;
+  }[];
+  location: LatLngHeight;
+  /**
+   * x-axis
+   */
+  width?: number;
+  /**
+   * y-axis
+   */
+  length?: number;
+  /**
+   * z-axis
+   */
+  height?: number;
+  heading?: number;
+  pitch?: number;
+  roll?: number;
+};
+
+// Don't forget adding a new field to valueTypeMapper also!
+export type ValueTypes = {
+  string: string;
+  number: number;
+  bool: boolean;
+  latlng: LatLng;
+  latlngheight: LatLngHeight;
+  url: string;
+  camera: Camera;
+  typography: Typography;
+  coordinates: Coordinates;
+  polygon: Polygon;
+  rect: Rect;
+  ref: string;
+  tiletype: string;
+};
+
+const valueTypeMapper: Partial<Record<GQLValueType, ValueType>> = {
+  [GQLValueType.Bool]: "bool",
+  [GQLValueType.Number]: "number",
+  [GQLValueType.String]: "string",
+  [GQLValueType.Url]: "url",
+  [GQLValueType.Latlng]: "latlng",
+  [GQLValueType.Latlngheight]: "latlngheight",
+  [GQLValueType.Camera]: "camera",
+  [GQLValueType.Typography]: "typography",
+  [GQLValueType.Coordinates]: "coordinates",
+  [GQLValueType.Polygon]: "polygon",
+  [GQLValueType.Rect]: "rect",
+  [GQLValueType.Ref]: "ref",
+};
+
+export type ValueType = keyof ValueTypes;
+
+export const valueFromGQL = (val: any, type: GQLValueType) => {
+  const t = valueTypeFromGQL(type);
+  if (typeof val === "undefined" || val === null || !t) {
+    return undefined;
+  }
+  const ok = typeof val !== "undefined" && val !== null;
+  let newVal = val;
+  if (t === "camera" && val && typeof val === "object" && "altitude" in val) {
+    newVal = {
+      ...val,
+      height: val.altitude,
+    };
+  }
+  if (
+    t === "typography" &&
+    val &&
+    typeof val === "object" &&
+    "textAlign" in val &&
+    typeof val.textAlign === "string"
+  ) {
+    newVal = {
+      ...val,
+      textAlign: val.textAlign.toLowerCase(),
+    };
+  }
+  return { type: t, value: newVal ?? undefined, ok };
+};
+
+export function valueToGQL<T extends ValueType>(
+  val: ValueTypes[T] | null | undefined,
+  type: T,
+): any {
+  if (type === "camera" && val && typeof val === "object" && "height" in val) {
+    return {
+      ...(val as any),
+      altitude: (val as any).height,
+    };
+  }
+  return val ?? null;
+}
+
+export const valueTypeFromGQL = (t: GQLValueType): ValueType | undefined => {
+  return valueTypeMapper[t];
+};
+
+export const valueTypeToGQL = (t: ValueType): GQLValueType | undefined => {
+  return (Object.keys(valueTypeMapper) as GQLValueType[]).find(k => valueTypeMapper[k] === t);
+};
+
+export const toGQLSimpleValue = (v: unknown): string | number | boolean | undefined => {
+  return typeof v === "string" || typeof v === "number" || typeof v === "boolean" ? v : undefined;
+};
+
+export const getCSSFontFamily = (f?: string) => {
+  return !f
+    ? undefined
+    : f === "YuGothic"
+    ? `"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic"`
+    : f;
+};
+
+export const toCSSFont = (t?: Typography, d?: Typography) => {
+  const ff = getCSSFontFamily(t?.fontFamily ?? d?.fontFamily)
+    ?.replace("'", '"')
+    .trim();
+  return `${t?.italic ?? d?.italic ? "italic " : ""}${
+    t?.bold ?? d?.bold ? "bold " : (t?.fontWeight ?? d?.fontWeight ?? "") + " " ?? ""
+  }${t?.fontSize ?? d?.fontSize ?? 16}px ${
+    ff ? (ff.includes(`"`) ? ff : `"${ff}"`) : "sans-serif"
+  }`;
+};
+
+export const toTextDecoration = (t?: Typography) => (t?.underline ? "underline" : "none");
+
+export const toColor = (c?: string) => {
+  if (!c || typeof c !== "string") return undefined;
+
+  // support alpha
+  const m = c.match(/^#([A-Fa-f0-9]{6})([A-Fa-f0-9]{2})$|^#([A-Fa-f0-9]{3})([A-Fa-f0-9])$/);
+  if (!m) return Color.fromCssColorString(c);
+
+  const alpha = parseInt(m[4] ? m[4].repeat(2) : m[2], 16) / 255;
+  return Color.fromCssColorString(`#${m[1] ?? m[3]}`).withAlpha(alpha);
+};
+
+export const typographyStyles = (t?: Typography) => {
+  if (!t) return null;
+  return css`
+    font: ${toCSSFont(t)};
+    text-decoration: ${toTextDecoration(t)};
+    color: ${t.color ?? null};
+    text-align: ${t.textAlign ?? null};
+  `;
+};
+
+export const zeroValues: { [key in ValueType]?: ValueTypes[ValueType] } = {
+  bool: false,
+  string: "",
+};