# Generated JayElement > note: this is an "how it works doc" The `@jay-framework/compiler` compiles `jay-html` into `JayElement` implementation code files, discussed here. Taking the example from the [readme.md](../readme.md), the `jay-html` is ```html

{count}

``` and the generated jay element is ```typescript import { JayElement, element as e, dynamicText as dt, RenderElement, ReferencesManager, ConstructContext, HTMLElementProxy, RenderElementOptions, } from '@jay-framework/runtime'; export interface CounterViewState { count: number; } export interface CounterElementRefs { subtracter: HTMLElementProxy; adderButton: HTMLElementProxy; } export type CounterElement = JayElement; export type CounterElementRender = RenderElement< CounterViewState, CounterElementRefs, CounterElement >; export type CounterElementPreRender = [CounterElementRefs, CounterElementRender]; export function render(options?: RenderElementOptions): CounterElementPreRender { const [refManager, [refSubtracter, refAdderButton]] = ReferencesManager.for( options, ['subtracter', 'adderButton'], [], [], [], ); const render = (viewState: CounterViewState) => ConstructContext.withRootContext(viewState, refManager, () => e('div', {}, [ e('button', {}, ['-'], refSubtracter()), e('span', { style: { cssText: 'margin: 0 16px' } }, [dt((vs) => vs.count)]), e('button', {}, ['+'], refAdderButton()), ]), ) as CounterElement; return [refManager.getPublicAPI() as CounterElementRefs, render]; } ``` The generated file can use any of set of jay element creation functions - `element`, `dynamicElement`, `dynamicText`, `dynamicAttribute`, `dynamicProperty`, `childComp`, `forEach`, `conditional`. - See the [Runtime Implementation](./runtime.md) for the details of the jay-element constructor functions.