Visual HTML

Visual HTML is a powerful feature that allows you to modify the styling of internal HTML elements within your own component.

With this feature, you can create a variety of visual styles for the same component, as demonstrated in the three examples below:

Next player: X

Visual HTML provides the flexibility to style your component in any way you want, without sacrificing functionality. This is particularly important in frontend development, where styles can change frequently.

In the past, making changes to the source file, pushing to Git, and deploying the changes was a slow and tedious process. With Visual HTML, you no longer need to hardcode CSS in your components. You can easily create different versions of the same component with different styles, without writing any code.

You can experience this feature in action in Raber.

In the example below, we showcase another case where the same component is styled differently and has different languages：

Let's dive into the code of the chessboard:

import { Button, Comp, Form, Input, Label, Text } from '@raber/react';
import React, { useState } from 'react';

interface FormValues {
  username: string;
  password: string;
}

interface Props {
  onSubmit: (formValues: FormValues) => void;
}

export const LoginForm = Comp(({ onSubmit }: Props) => {
  const [formValues, setFormValues] = useState<FormValues>({
    username: '',
    password: '',
  });

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSubmit(formValues);
  };

  return (
    <Form vKey="login_form" onSubmit={handleSubmit}>
      <Label vKey="username_label">
        <Text vKey="username">Username:</Text>
        <Input
          vKey="username_input"
          type="text"
          value={formValues.username}
          onChange={(event) =>
            setFormValues({ ...formValues, username: event.target.value })
          }
        />
      </Label>
      <Label vKey="username_label">
        <Text vKey="password">Password:</Text>
        <Input
          vKey="username_input"
          type="password"
          value={formValues.password}
          onChange={(event) =>
            setFormValues({ ...formValues, password: event.target.value })
          }
        />
      </Label>
      <Button vKey="login_submit" type="submit"> <Text vKey="sign_up">Sign Up</Text></Button>
    </Form>
  );
}, {
    name: 'Login Form',
    category: 'Base',
});

Raber allows you to make nearly all HTML tags visually editable by replacing them with the equivalent tag exported by Raber in camel case format.

For example, you can replace a label tag with Label, and a button tag with Button. This will make the corresponding tag editable in editor.

But you need to specify an additional prop, which is vKey, its like the id or className of html element. Raber will use it to identify your element, so elements with the same vKey will share the same style.

Congratulations!

You just learned how to make various stylings of your component with the power of Visual HTML.

You can continue to boost your productivity by exploring the next chapter on unleashing the power of AI with Raber Copilot!

📚 Learn how to unlease the power of Raber Copilot