This guide provides comprehensive steps on how to extend NEAR's Blockchain Operating System (BOS) Virtual Machine ([VM](https://github.com/NearSocial/VM)). The aim is to introduce a new custom element, 'R3F' and explain how to render it.

## Locate the VM file

Firstly, start by locating the VM file. You will find this in the path `./src/lib/vm/vm.js`.

## Modifying Approved Tags

Once you've opened the VM file, you will see a constant called `ApprovedTagsCustom`. This object lists the currently approved tags. To introduce our new element, we add it here:

const ApprovedTagsCustom = {
  Widget: false,
  ...
  R3F: true, // This introduces the new R3F element
};

## Creating R3F Specific Tags

In the next step, create a new object called R3FTags for tags that can be rendered as children of your new R3F element:

const R3FTags = {
  boxGeometry: true,
  meshStandardMaterial: true,
  mesh: true
};

## Constructing Helper Methods

Now, it's time to define helper methods that will allow the VM to identify if an element is your newly added custom element. To achieve this, implement the following methods:

const isR3FComponent = (element) => {
  return element === "R3F";
}

const isThreeElement = (element) => {
  return Object.keys(R3FTags).includes(element);
}

The `isR3FComponent` function checks if the given element equals 'R3F', while `isThreeElement` checks if the element exists within the `R3FTags` object.

## Modifying the RenderElement Method

he next step involves modifying the `renderElement` method. Here, you must add a conditional to check if the element is the custom 'R3F' element:

renderElement(code) {
    ...
    if (withChildren === undefined) {
      if (this.vm.near.config.customElements.hasOwnProperty(element)) {
        withChildren = true;
        customElement = this.vm.near.config.customElements[element];
      }
    }
    else if(isR3FComponent(element)){
      withChildren = true;
    }
    ...
}

## Adjusting Conditional Rendering

Subsequently, you should add the rendering part to the conditional rendering logic. This code checks for different types of elements and renders them accordingly:

else if (element === "Web3Connect") {
      return <Web3ConnectButton {...attributes} />;
} 
else if (isThreeElement(element)){
      return React.createElement(element, { ...attributes }, ...children);
}
else if (isR3FComponent(element)) {
      return <R3F {...attributes}>{children}</R3F>;
}

## Creating the R3F JSX Element

The final step is to create the `R3F` JSX element. This will be rendered whenever 'R3F' is encountered:

export const R3F = ({ children, props }) => {
    ...
    return <>Whatever you want</>;
}

In this JSX element, 'children' are the child elements, and 'props' are the properties passed into the 'R3F' component. This 'R3F' component can render any JSX content you want.

By following these steps, you have successfully added a custom 'R3F' element to NEAR's BOS VM, thus extending its capabilities.