var $globalCounter = 0;
$createEffect(() => {
  console.log("Global counter increased to", $globalCounter);
});
function Component() {
  var $localCounter = 0;
  var increment = function() {
    $globalCounter++;
    $localCounter++;
  };
  return (
    <div>
      <button onClick={increment}>
        Increment to {$localCounter}
      </button>
    </div>
  );
}

export default Component;
export { $globalCounter }

Mango Framework

A framework designed with performance and compatibility in mind.

Eco Friendly

For the sake of reduced carbon footprint, Mango is designed to be compatible with every browser released since 1999. In addition, It's very small and uses negligible memory and CPU processing power.

internet explorer 6 logo firefox 1 logo chrome 1 logo safari 1 logo

fire emoji Remote Functions

const res = await fetch("https://example.com/api/encrypt", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ msg: "Hello World!" }),
});
const { encryptedMsg } = await res.json();
console.log(encryptedMsg);
import { encrypt } from "./encryption.remote";
const encryptedMsg = await encrypt("Hello World!");
console.log(encryptedMsg);

Dynamic Content

Whatever your content is dynamically generated at runtime or compile-time, Mango can handle it. All pages templates are loaded into the server memory to make sure that content is populated and served as fast as possible.

YOUR IP ADDRESS
34.205.235.101

cupcake emoji Much Sweet

<button
  id={true && 'real-id'}
  id={false && 'troll-id'}
  class="base-class"
  class={new Date().getHours() > 12 ? 'afternoon' : 'morning'}
  onClick={() => alert('Hello World!')}
  onClick={() => alert('Goodbye World!')}
/>

Attribute Accumulation

Feel free to use the same attribute multiple times. Compiler will merge them into one.

<button
  ID="myDiv"
  onClick={() => alert('Hello World!')}
  onclick={() => alert('Goodbye World!')}
  innerHTML="Click Me"
  auto_focus
/>

Case Insensitivity

Whatever the case you use for HTML attribute names, compiler will interpret them correctly.

<video
  bind:currentTime={$progress}
  bind:duration={$duration}
  bind:paused={$isPaused}
  bind:volume={$volume}
  bind:muted={$isMuted}
/>

Bound Attributes

Brought from Svelte, keep form controls and media elements attributes in sync with variables.

<p
  color="red"
  font-size={20}
  font-weight="bold"
  text-align="center"
  text-decoration="underline"
/>

Attribute-Like Styles

No problem if you want to define styles as attributes. Compiler can differentiate them from attributes.

<Card
  title="Hello World"
  link="https://google.com"
  style:color="black"
  event:onClick={toggleBgColor}
  event:onClick={() => console.log("Card clicked!")}
/>

Component Styling

Style components or add event listeners to them using attributes. No need to manipulate their definitions.

<Range
  min={0}
  max={$duration || 0}
  step={1}
  disabled={false}
  $value={$progress}
/>

2-Way Binding

Brought from Angular, keep parents and their children in communication with each other.

Native Performance

Mango does not use a virtual DOM but instead applies changes through DOM API. To reduce the time needed to render changes, only attributes whose values have changed are updated natively without re-rendering the entire element.

Innovated techniques are used to manipulate and render massive lists efficiently. This is done by manipulating values of elements attributes instead of replacing the existing elements with new ones.

avatar of Joe Doe 1
Joe Doe 1
joedoe1@example.com
avatar of Joe Doe 2
Joe Doe 2
joedoe2@example.com
avatar of Joe Doe 3
Joe Doe 3
joedoe3@example.com
avatar of Joe Doe 4
Joe Doe 4
joedoe4@example.com
avatar of Joe Doe 5
Joe Doe 5
joedoe5@example.com
avatar of Joe Doe 6
Joe Doe 6
joedoe6@example.com
avatar of Joe Doe 7
Joe Doe 7
joedoe7@example.com
avatar of Joe Doe 8
Joe Doe 8
joedoe8@example.com
avatar of Joe Doe 9
Joe Doe 9
joedoe9@example.com
avatar of Joe Doe 10
Joe Doe 10
joedoe10@example.com
avatar of Joe Doe 11
Joe Doe 11
joedoe11@example.com
avatar of Joe Doe 12
Joe Doe 12
joedoe12@example.com
avatar of Joe Doe 13
Joe Doe 13
joedoe13@example.com
avatar of Joe Doe 14
Joe Doe 14
joedoe14@example.com
avatar of Joe Doe 15
Joe Doe 15
joedoe15@example.com
avatar of Joe Doe 16
Joe Doe 16
joedoe16@example.com
avatar of Joe Doe 17
Joe Doe 17
joedoe17@example.com
avatar of Joe Doe 18
Joe Doe 18
joedoe18@example.com
avatar of Joe Doe 19
Joe Doe 19
joedoe19@example.com
avatar of Joe Doe 20
Joe Doe 20
joedoe20@example.com
avatar of Joe Doe 21
Joe Doe 21
joedoe21@example.com
avatar of Joe Doe 22
Joe Doe 22
joedoe22@example.com
avatar of Joe Doe 23
Joe Doe 23
joedoe23@example.com
avatar of Joe Doe 24
Joe Doe 24
joedoe24@example.com
avatar of Joe Doe 25
Joe Doe 25
joedoe25@example.com
avatar of Joe Doe 26
Joe Doe 26
joedoe26@example.com
avatar of Joe Doe 27
Joe Doe 27
joedoe27@example.com
avatar of Joe Doe 28
Joe Doe 28
joedoe28@example.com
avatar of Joe Doe 29
Joe Doe 29
joedoe29@example.com
avatar of Joe Doe 30
Joe Doe 30
joedoe30@example.com
avatar of Joe Doe 31
Joe Doe 31
joedoe31@example.com
avatar of Joe Doe 32
Joe Doe 32
joedoe32@example.com
avatar of Joe Doe 33
Joe Doe 33
joedoe33@example.com
avatar of Joe Doe 34
Joe Doe 34
joedoe34@example.com
avatar of Joe Doe 35
Joe Doe 35
joedoe35@example.com
avatar of Joe Doe 36
Joe Doe 36
joedoe36@example.com
avatar of Joe Doe 37
Joe Doe 37
joedoe37@example.com
avatar of Joe Doe 38
Joe Doe 38
joedoe38@example.com
avatar of Joe Doe 39
Joe Doe 39
joedoe39@example.com
avatar of Joe Doe 40
Joe Doe 40
joedoe40@example.com
avatar of Joe Doe 41
Joe Doe 41
joedoe41@example.com
avatar of Joe Doe 42
Joe Doe 42
joedoe42@example.com
avatar of Joe Doe 43
Joe Doe 43
joedoe43@example.com
avatar of Joe Doe 44
Joe Doe 44
joedoe44@example.com
avatar of Joe Doe 45
Joe Doe 45
joedoe45@example.com
avatar of Joe Doe 46
Joe Doe 46
joedoe46@example.com
avatar of Joe Doe 47
Joe Doe 47
joedoe47@example.com
avatar of Joe Doe 48
Joe Doe 48
joedoe48@example.com
avatar of Joe Doe 49
Joe Doe 49
joedoe49@example.com
avatar of Joe Doe 50
Joe Doe 50
joedoe50@example.com
avatar of Joe Doe 51
Joe Doe 51
joedoe51@example.com
avatar of Joe Doe 52
Joe Doe 52
joedoe52@example.com
avatar of Joe Doe 53
Joe Doe 53
joedoe53@example.com
avatar of Joe Doe 54
Joe Doe 54
joedoe54@example.com
avatar of Joe Doe 55
Joe Doe 55
joedoe55@example.com
avatar of Joe Doe 56
Joe Doe 56
joedoe56@example.com
avatar of Joe Doe 57
Joe Doe 57
joedoe57@example.com
avatar of Joe Doe 58
Joe Doe 58
joedoe58@example.com
avatar of Joe Doe 59
Joe Doe 59
joedoe59@example.com
avatar of Joe Doe 60
Joe Doe 60
joedoe60@example.com
avatar of Joe Doe 61
Joe Doe 61
joedoe61@example.com
avatar of Joe Doe 62
Joe Doe 62
joedoe62@example.com
avatar of Joe Doe 63
Joe Doe 63
joedoe63@example.com
avatar of Joe Doe 64
Joe Doe 64
joedoe64@example.com
avatar of Joe Doe 65
Joe Doe 65
joedoe65@example.com
avatar of Joe Doe 66
Joe Doe 66
joedoe66@example.com
avatar of Joe Doe 67
Joe Doe 67
joedoe67@example.com
avatar of Joe Doe 68
Joe Doe 68
joedoe68@example.com
avatar of Joe Doe 69
Joe Doe 69
joedoe69@example.com
avatar of Joe Doe 70
Joe Doe 70
joedoe70@example.com
avatar of Joe Doe 71
Joe Doe 71
joedoe71@example.com
avatar of Joe Doe 72
Joe Doe 72
joedoe72@example.com
avatar of Joe Doe 73
Joe Doe 73
joedoe73@example.com
avatar of Joe Doe 74
Joe Doe 74
joedoe74@example.com
avatar of Joe Doe 75
Joe Doe 75
joedoe75@example.com
avatar of Joe Doe 76
Joe Doe 76
joedoe76@example.com
avatar of Joe Doe 77
Joe Doe 77
joedoe77@example.com
avatar of Joe Doe 78
Joe Doe 78
joedoe78@example.com
avatar of Joe Doe 79
Joe Doe 79
joedoe79@example.com
avatar of Joe Doe 80
Joe Doe 80
joedoe80@example.com
avatar of Joe Doe 81
Joe Doe 81
joedoe81@example.com
avatar of Joe Doe 82
Joe Doe 82
joedoe82@example.com
avatar of Joe Doe 83
Joe Doe 83
joedoe83@example.com
avatar of Joe Doe 84
Joe Doe 84
joedoe84@example.com
avatar of Joe Doe 85
Joe Doe 85
joedoe85@example.com
avatar of Joe Doe 86
Joe Doe 86
joedoe86@example.com
avatar of Joe Doe 87
Joe Doe 87
joedoe87@example.com
avatar of Joe Doe 88
Joe Doe 88
joedoe88@example.com
avatar of Joe Doe 89
Joe Doe 89
joedoe89@example.com
avatar of Joe Doe 90
Joe Doe 90
joedoe90@example.com
avatar of Joe Doe 91
Joe Doe 91
joedoe91@example.com
avatar of Joe Doe 92
Joe Doe 92
joedoe92@example.com
avatar of Joe Doe 93
Joe Doe 93
joedoe93@example.com
avatar of Joe Doe 94
Joe Doe 94
joedoe94@example.com
avatar of Joe Doe 95
Joe Doe 95
joedoe95@example.com
avatar of Joe Doe 96
Joe Doe 96
joedoe96@example.com
avatar of Joe Doe 97
Joe Doe 97
joedoe97@example.com
avatar of Joe Doe 98
Joe Doe 98
joedoe98@example.com
avatar of Joe Doe 99
Joe Doe 99
joedoe99@example.com
avatar of Joe Doe 100
Joe Doe 100
joedoe100@example.com

Friendly To Memory

Every piece of data retained by Mango is optimized for low memory consumption. This makes it ideal for building web applications that are used on small gadgets.

Mango
18.57
Svelte
22.86
Vue
26.77
React
34.65

Size of memory snapshot when 10K rows are rendered. Unit: megabytes

Power Efficient

Unlike other frameworks, Mango exploits the existing implementation of DOM API to render any change that happened. It does not use a virtual DOM, nor re-render the entire element when a change occurs. Instead, it uses publisher-subscriber design pattern to update the attributes of the updated element natively. This secures enough resources to run heavy tasks such as JavaScript-driven animations.

36% @ 59 fps

Bound Attributes

Developing custom media players and form controls isn't a problem anymore. Mango provides a set of attributes that can be kept in sync with any state variable. Whenever the state of your application changes, the bound attributes are updated automatically. The same applies when the value of a bound attribute changes, where the state variable is updated accordingly.

Caminandes: Llamigos

by Blender Foundation

0:00:000 / 2:30:117